Namikaze Sheena Namikaze Sheena - 5 months ago 63
jQuery Question

Disable time outside minTime and maxTime range

I tried to link 2 jquery-ui timepicker.

var time = new Date();
$('#from').timepicker({
onClose: function(dateText, inst) {
var startDateTextBox = $('#to');
if (startDateTextBox.val() != '') {
var testStartDate = new Date(startDateTextBox.val());
var testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function(dateText){
var time = new Date($(this).datetimepicker('getTime').getTime());
$('#to').timepicker('option', 'minTime',time);
}
});


$('#to').timepicker({
onClose: function(dateText, inst) {
var startDateTextBox = $('#from');
if (startDateTextBox.val() != '') {
var testStartDate = new Date(startDateTextBox.val());
var testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function(dateText){
var time = new Date($(this).datetimepicker('getTime').getTime());
$('#from').timepicker('option', 'maxTime',time);
}
});


all that code do is just put timepicker value on each other input if it's empty.

I need they to look like this :

from:

enter image description here

to:

enter image description here

and when 16 is choosen in #from then all minutes above 25 will be disabled,then when 12 is choosen in #to then all minutes below 35 will be disabled.

Can it be done? if can, how?

Answer