The Infor CRM web client offers a time picker component to its date time control to allow a user to pick from a list of available times. THis control is based on the client side dijit TimeTextBox widget. The unfortunate downside to this widget is it streches from 12AM to 12pm in 15 minute increments like so:
In later versions of the dijit library than is provided with Infor CRM, they have implemented a way to control the minimum and maximum times. But for Infor CRM that is not available.
So how do you control what times are available? Well there is a way but it requires 2 parts. Lets take a look.
The first step is to create a custom module that extends the base dijit TimeTextBox control. We can then add an aspect.before to the buildRendering base function to add in minimum and maximum a constraint.
The code for this would like like so:
require(['dojo/aspect', 'dijit/form/TimeTextBox'], function(aspect, TimeTextBox) {
aspect.before(TimeTextBox.prototype, 'buildRendering', function() {
var today = new Date();
var _min = new Date(today.getYear(),today.getMonth(),today.getDay(),7, 0, 0);
var _max = new Date(today.getYear(),today.getMonth(),today.getDay(),22, 0, 0);
this.constraints.min = _min;
this.constraints.max = _max;
});
});
In my code I am setting a minimum time of 7AM and a maximum of 10PM. This results in the control rendering like this:
Notice how times outside the range now show with a line through them. Additionally, the control prevents the user from selected one of these times outside the range. Better but the times still show. How do we remove those? Well that is simple. We just need to change the style applied to a disabled item. To do so we add a custom style for the dijitTimePickerItemDisabled class:
.dijitTimePickerItemDisabled {
display: none;
}
Now with both of those implemented the time picker no longer shows the times outside the range we want.
