Dojo – Hiding disabled times for the TimeTextBox/TimePicker

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!