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

16,770

Solution 1

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);
    }
});

Solution 2

$('#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);
    }

});
Share:
16,770
BeardedGeek
Author by

BeardedGeek

HTML, CSS, Learning PHP

Updated on June 19, 2022

Comments

  • BeardedGeek
    BeardedGeek almost 2 years

    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