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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | dojo.declare( "my._TimePicker" ,dijit._TimePicker,{
_getFilteredNodes: function ( start, maxNum, before){
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:
1 2 3 | dojo.addOnLoad( function () {
dijit.byId( "from-time" ).popupClass = "my._TimePicker" ;
});
|
Hopefully this is useful for somebody!
Recent Comments