javascript - 从当前时间开始计时之前禁用取决于使用 jquery timepicker 的日期选择

Question

我有两个下拉菜单，第一个包含日期(今天、明天等...)，第二个包含时间(上午 12:00、下午 12:30 等...)。

如果我从第一个下拉列表中选择今天，那么它应该隐藏第二个下拉列表中早于当前时间的时间(选择今天，当前时间是下午 02:00，那么它应该禁用 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

在日期框中更改事件时，您可以检查是否是今天。如果是今天，那么您只能呈现 future 的时间。否则，请选择像这样的所有时间。

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