Disable before timing from current time depend on day selection using jquery timepicker

Question

I have two dropdowns, the first contains days (Today, tomorrow & so on..) the second has timings (12:00 am, 12:30 pm so on...).

If I select today from the first dropdown then it should hide the times in the second one that are earlier than the current time ( Select today, the current time is 02:00 pm, then it should disable 1:30, 1:00, 12:30, 12:00) If I select other than today it shows all timings.

    var dateRange = document.getElementById('date-range'),
	monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
for (var day = 2; day < 7; day++) {
	var date = new Date();
	date.setDate(date.getDate() + day);
	dateRange.options[dateRange.options.length] = new Option([weekday[date.getDay()], date.getDate(), monthNames[date.getMonth()]]);
	dateRange.value[dateRange.options.length] = new Option([weekday[date.getDay()], date.getDate(), monthNames[date.getMonth()]]);
};

$(function () {
	$('#example').timepicker({
		'timeFormat': 'h:i A',
		'disableTimeRanges': [
			['12am', getCurrentTime(new Date())]
		]
	});
});

function getCurrentTime(date) {
	var hours = date.getHours(),
		minutes = date.getMinutes(),
		ampm = hours >= 12 ? 'pm' : 'am';

	hours = hours % 12;
	hours = hours ? hours : 12; // the hour '0' should be '12'
	minutes = minutes < 10 ? '0' + minutes : minutes;
	return hours + ':' + minutes + ' ' + ampm;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet" />
    <select id="date-range" class="day" data-validation="required" name="bldate" required="required">
   <option value="">Select</option>
   <option value="<?php echo date('Y-m-d');?>">Today</option>
   <option value="<?php $datetime = new DateTime('tomorrow'); echo $datetime->format('Y-m-d');?>">Tomorrow</option>
</select>
<input type="text" id="example" />

Answer 1

On change event in the date box, you can check whether it is today or not. If it is today then you can present only future hours. Other wise give option of all hours like this.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
    <link href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet" />
       <select id="date-range" class="day" data-validation="required" name="bldate" required="required">
       <option value="">Select</option>
       <option value="<?php echo date('Y-m-d');?>">Today</option>
       <option value="<?php $datetime = new DateTime('tomorrow'); echo $datetime->format('Y-m-d');?>">Tomorrow</option>
    </select>
    <input type="text" id="example" />


    <script>
        var dateRange = document.getElementById('date-range'),
        monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        var today = "<?php echo date('Y-m-d');?>";
        for (var day = 2; day < 7; day++) {
        var date = new Date();
        date.setDate(date.getDate() + day);
        dateRange.options[dateRange.options.length] = new Option([weekday[date.getDay()], date.getDate(), monthNames[date.getMonth()]]);
        dateRange.value[dateRange.options.length] = new Option([weekday[date.getDay()], date.getDate(), monthNames[date.getMonth()]]);
        };

        $(function () {
            $('#example').timepicker({
                    'timeFormat': 'h:i A'
            });
        });

        $("#date-range").change(function() {
            console.log(this.value);
            console.log(today);

            $("#example").val('');
            if(this.value === today) {
                var  thisHour = getCurrentTime(new Date());
                console.log(thisHour);

                $('#example').timepicker('option', 'minTime', thisHour); 
                $('#example').timepicker('option', 'maxTime', '11:30 PM');

            }
            else {
                $('#example').timepicker('option', 'minTime', '12:00 AM'); 
                $('#example').timepicker('option', 'maxTime', '11:30 PM');                    
            }

        });

        function getCurrentTime(date) {
        var hours = date.getHours(),
                minutes = date.getMinutes(),
                ampm = hours >= 12 ? 'PM' : 'AM';

                if(minutes > 30 ){
                    minutes = "00";
                    hours ++;
                }
                else {
                    minutes = "00";
                }
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'

        return hours + ':' + minutes + ' ' + ampm;

        }  

    </script>