I am using the ‘Date Time Picker’ control, but would like to be able to restrict the choice of dates, something you can do with regular Dojo with code along these lines:
startDate.constraints.min = new Date(2008,08,18,00,00,00);
I’m not sure how to do that on an XPage. I’m still trying to get my head around the differences with client and server side scripts, and features like output scripts, but hopefully someone can point me in the right direction.
Thanks,
Karl
Subject: Use the Date Picker properties
Open the Date Picker Properties view to the Validation tab. There are options to set the minimum/maximum dates, as well as error message for input outside the range.
– Vin
IBM
Subject: Not quite what I am looking for
Hi Vin,
I’m not trying to validate the input, I’m actually trying to restrict the picker to a range of dates, with the others greyed out.
I’ve gotten a little closer, by adding the following code directly to the source:
XSP.addOnLoad(function () {
initLocal();
}
);
and then adding a computed field with this code:
var out=“<script language="Javascript">\n”;
out += “var myElementId = "” + getClientId(“DatePicker”) + “";\n”;
out += “function initLocal(){\n”;
out += “var dp = dijit.byId(myElementId);\n”
out += “alert(dp.constraints);\n”
out += “dojo.mixin(dp.constraints, {max: new Date(2009,3,10)});\n”
out += “dp.postCreate();\n”
out += “alert(dp.constraints);\n”
out += “}\n”;
out += “”;
out
The first alert does indeed return the constraints from the dojo datetextbox widget:
{datePattern:“MMM d, yyyy”,timePattern:“h:mm:ss a”,selector:“date”}
But the updated constraint (‘max’ in the code example above) never gets picked up. I’ve tried various ways of setting it (‘db.constraints.max =…’ for example), and just can’t get it to work.
Thanks,
Karl
Subject: One step closer.
I’ve now managed to change the constraints of the datetextbox, but the changes have no effect! I’m guessing I need to re-initialize the object somehow. Here’s the amended code:
var out=“<script language="Javascript">\n”;
out += “var myElementId = "” + getClientId(“DatePicker”) + “";\n”;
out += “function initLocal(){\n”;
out += “var dp = dijit.byId(myElementId);\n”
out += “alert(dp.constraints);\n”
out += “dp.constraints = "{datePattern:‘MMM d, yyyy’,timePattern:‘h:mm:ss a’,selector:‘date’, min: new Date(2009,3,1)}";\n”
out += “dp.startup();\n”
out += “alert(dp.constraints);\n”
out += “}\n”;
out += “”;
out
Subject: Solved!
My solution was to forget about the built in date picker widget, and use one straight from Dojo.
I added a regular edit box, bound to the requestScope variable ‘Date’:
<xp:inputText id=“DatePicker” value=“#{requestScope.Date}” defaultValue=“#{javascript:@Today()}”>
</xp:inputText>
Then, below that I added an ‘output script’ which creates the Dojo DateTextBox widget using various dynamic variables:
var myvalue = "#{javascript:
var value;
if(requestScope.Date == null) {
value = session.createDateTime(“Today”);
} else {
value = session.createDateTime(requestScope.Date);
}
return value.toJavaDate();
}";
var tmpStartDate = "#{javascript:
var today = session.createDateTime(“Today”);
today.adjustMonth(-1)
return today.toJavaDate()
;}";
var tmpEndDate = "#{javascript:
var today = session.createDateTime(“Today”);
today.adjustMonth(18)
return today.toJavaDate()
;}";
var newStartDate = new Date(tmpStartDate);
var newEndDate = new Date(tmpEndDate);
var pickedDate = new Date(myvalue);
new dijit.form.DateTextBox({name:“#{id:DatePicker}”,value:pickedDate, constraints:{datePattern:‘MMM d, yyyy’,timePattern:‘h:mm:ss a’,selector:‘date’, min: newStartDate, max: newEndDate}},
XSP.getElementById(“#{id:DatePicker}”));
Finally, I needed to add a ‘dojoModule’ resource to the XPage properties, with ‘dijit.form.DateTextBox’ as the name.
When I open the page, my edit box has been replaced with the date picker, and all the dates outside my range are greyed out. The only issue is that the field doesn’t have the nice calendar icon next to it, like the default one. I’m assuming that is a CSS issue of some sort.
Karl