根据使用 jquery timepicker 的日期选择，在当前时间计时之前禁用

Question

我有两个下拉列表，第一个包含天数（今天、明天等等......）第二个包含时间（12:00 am，12:30 pm 等等...）。

如果我今天从第一个下拉列表中 select 那么它应该隐藏第二个中早于当前时间的时间（ Select 今天，当前时间是 02:00 pm，那么它应该禁用 1:30、1:00、12:30、12:00) 如果我 select 除了今天，它会显示所有时间。

    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>

根据使用 jquery timepicker 的日期选择，在当前时间计时之前禁用

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

javascript

jquery

datetimepicker