从当前时间到定时之前禁用使用jQuery timepicker的一天选择

Question

我有两个下拉列表，第一个包含几天(今天，明天，＆amp; o。(。

如果我今天从第一个下拉列表中进行选择，那么它应该隐藏第二个时间比当前时间更早的时间(当前时间，当前时间是02:00 pm，则应禁用1：30，1：00，12：30，12：00(如果我选择今天以外的其他时间显示所有时间。

    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

在日期框中的变更事件上，您可以检查今天是否。如果是今天，那么您只能展示以后的时间。其他明智的选择都这样的所有时间。

    <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>