CODEWITHSUNDEEP
javascriptdojo
lazyCat
lazyCat

Reputation: 121

How to use dijit/form/TimeTextBox?

<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" />

This is the code I have been working on. Here, I need to show the difference as 1 hour, but instead the dropdown shows time of difference 15 mins. At the same time I want to show the limit from 8 Am to 2 PM Could someone help me on this as well?

Upvotes: 0

Views: 2127

Answers (1)

iH8
iH8

Reputation: 28638

Use the dojo-data-props to set the constraints. First for your increment which is now set to 15 minutes, to an hour:

constraints: {
    clickableIncrement: 'T01:00:00',
    visibleIncrement: 'T01:00:00'
}

To set the range of available time increments first you need to calculate the min and max:

//today
var today = new Date();

//today 8am
var min = new Date(
    today.getYear(),
    today.getMonth(),
    today.getDay(),
    8, 0, 0);

//today 2pm
var max = new Date(
    today.getYear(),
    today.getMonth(),
    today.getDay(),
    14, 0, 0);

Then define them in your constraints:

constraints: {
    min: min,
    max: max
}

You should also set the selected value to within your data-dojo-props so they fall within your constraints:

value: min

That would sum up to something like this:

<script>
var today = new Date();
var min = new Date(
    today.getYear(),
    today.getMonth(),
    today.getDay(),
    8, 0, 0);
var max = new Date(
    today.getYear(),
    today.getMonth(),
    today.getDay(),
    14, 0, 0);
</script>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"  onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" data-dojo-props="value: min, constraints:{ min: min, max: max, clickableIncrement: 'T01:00:00', visibleIncrement: 'T01:00:00'}"/>

Here's a working example on Plunker: http://plnkr.co/edit/Fl0gQnzwY6RjyjA2syPZ

Upvotes: 3

Related Questions