Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery UI - Set minTime on timepicker based on other timepicker value

I'm trying to set the minTime of my End Time timepicker based on what I've selected in the Start Time timepicker.

I have this, based on something that works for the regular datepicker, but it's not working.

$('#confirmed_time_start').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18,
    onSelect: function(timeStr) {

        var newTime = $(this).timepicker('getDate');
        if (newTime) { // Not null
        newTime.setDate(newTime.getDate());
        }
        $('#confirmed_time_end').timepicker('minTime', newTime)
        }

    });

$('#confirmed_time_end').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18 
    });

The error I'm receiving is:

Object doesn't support this property or method

like image 520
BeardedGeek Avatar asked Mar 21 '12 16:03

BeardedGeek


2 Answers

var time = new Date();
$('#from').timepicker({
    ampm: true,
    hourMin: 9,
    hourMax: 19,
    timeFormat: 'hh:mm TT',
    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('getDate').getTime());
        $('#to').timepicker('option', 'minDateTime',time);
    }
});
$('#to').timepicker({
    ampm: true,
    hourMin: 10,
    hourMax: 21,
    timeFormat: 'hh:mm TT',
    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('getDate').getTime());
        $('#from').timepicker('option', 'maxDateTime',time);
    }
});
like image 185
user3073464 Avatar answered Oct 22 '22 12:10

user3073464


$('#confirmed_time_start').timepicker({
timeFormat: 'hh:mm',
stepHour: 1,
stepMinute: 15,
hour: 8,
minute: 0,
hourMin: 8,
hourMax: 18,
onSelect: function(timeStr) {

    var newTime = $(this).timepicker('getDate');
    if (newTime) { // Not null
    newTime.setDate(newTime.getDate());
    }
   $('#confirmed_time_end').timepicker('setTime', newTime);
    }

});
like image 35
Jyoti Avatar answered Oct 22 '22 11:10

Jyoti