I had an issue recently where I had a dojo time picker and wanted to restrict the available times.
The obvious solution was to set the constraints on the time text box with: <input id="from-time" name="from-time" />
, however this still allows you to scroll to the disabled times, you just cannot select them.
After some playing I came to this javascript code, which sets up a new time picker called my._TimePicker . This TimePicker just scrolls right from the upper allowed end to the lower end, and does not show the times in between.
The code is:
dojo.declare("my._TimePicker",dijit._TimePicker,{
// extend the default show() method
_getFilteredNodes: function(/*number*/ start, /*number*/ maxNum, /*Boolean*/ before){
// summary:
// Returns an array of nodes with the filter applied. At most maxNum nodes
// will be returned - but fewer may be returned as well. If the
// before parameter is set to true, then it will return the elements
// before the given index
// tags:
// private
var nodes = [], n, i = start, max = this._maxIncrement + Math.abs(i),
chk = before?-1:1, dec = before?1:0, inc = before?0:1;
do{
i = i - dec;
var date = new Date(this._refDate);
var incrementDate = this._clickableIncrementDate;
date.setHours(date.getHours() + incrementDate.getHours() * i,
date.getMinutes() + incrementDate.getMinutes() * i,
date.getSeconds() + incrementDate.getSeconds() * i);
if(!this.isDisabledDate(date)) {
n = this._createOption(i);
if(n){nodes.push(n);}
}
i = i + inc;
}while(nodes.length < maxNum && (i*chk) < max);
if(before){ nodes.reverse(); }
return nodes;
}
});
This is a bit messy since most of this code is duplicated from the _getFilteredNodes in dijit._TimePicker, with a little extra code taken from the _getOption method. But, it works!
This doesn’t affect every TimeTextBox on the page; to use it for a particular text box, use something like:
dojo.addOnLoad(function() {
dijit.byId("from-time").popupClass = "my._TimePicker";
});
Hopefully this is useful for somebody!
Recent Comments