JQuery UI Datepicker 第二天中午 12 点后禁用

Question

我在我的电子商务网站上使用 JQuery UI 日期选择器，以便客户可以选择交货日期。我已将其设置为周末显示为灰色（无法选择）。我也有一些灰色的假期（比如圣诞节）。除此之外，我还将以前的日期显示为灰色，因此客户只能选择未来的日期。

通常客户可以选择“明天”作为交货日期，但我想实施中午 12 点（中午）的截止时间。如果当前时间在中午 12 点之后，则“明天”将显示为灰色，但如果时间在下午 12 点之前，则他们可以选择“明天”。

该网站仅在英国可用，并且托管在英国，因此我无需担心国际时间变化。

我在下面附上了我目前使用的代码。

<script>
    jQuery(document).ready(function($) {

        var delivery_city = jQuery('#delivery_date_block').find("#delivery_city"),
            delivery_date = jQuery("#delivery_date"),
            delivery_time = jQuery('#delivery_date_block').find("#delivery_time"),
            comment = jQuery("textarea[name='customer_comment']").eq(0,1);

        jQuery('#delivery_date_block').insertAfter(jQuery("textarea[name='customer_comment']"));

        var dateMin = new Date();
        var weekDays = AddWeekDays(1);

        dateMin.setDate(dateMin.getDate() + weekDays);

        var natDays = [
          [1, 1, 'uk'],
          [12, 25, 'uk'],
          [12, 26, 'uk']
        ];

        function noWeekendsOrHolidays(date) {
            var noWeekend = $.datepicker.noWeekends(date);
            if (noWeekend[0]) {
                return nationalDays(date);
            } else {
                return noWeekend;
            }
        }
        function nationalDays(date) {
            for (i = 0; i < natDays.length; i++) {
                if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
                    return [false, natDays[i][2] + '_day'];
                }
            }
            return [true, ''];
        }
        function AddWeekDays(weekDaysToAdd) {
            var daysToAdd = 0
            var mydate = new Date()
            var day = mydate.getDay()
            weekDaysToAdd = weekDaysToAdd - (5 - day)
            if ((5 - day) < weekDaysToAdd || weekDaysToAdd == 1) {
                daysToAdd = (5 - day) + 2 + daysToAdd
            } else { // (5-day) >= weekDaysToAdd
                daysToAdd = (5 - day) + daysToAdd
            }
            while (weekDaysToAdd != 0) {
                var week = weekDaysToAdd - 5
                if (week > 0) {
                    daysToAdd = 7 + daysToAdd
                    weekDaysToAdd = weekDaysToAdd - 5
                } else { // week < 0
                    daysToAdd = (5 + week) + daysToAdd
                    weekDaysToAdd = weekDaysToAdd - (5 + week)
                }
            }

            return daysToAdd;
        }

        jQuery('#delivery_date').datepicker({
            beforeShowDay: noWeekendsOrHolidays,
            minDate: dateMin,
            defaultDate: +1,
            firstDay: 1,
            changeFirstDay: true,
            dateFormat: "dd-mm-yy",
            onSelect: function(dateText) {
                 jQuery.cookies.set('delivery_date',dateText);
             }
        });

        delivery_city.val( jQuery.cookies.get('delivery_city', "<?php echo $city_value?>") )
                    .bind('change',function(){jQuery.cookies.set('delivery_city',jQuery(this).val())});

        delivery_time.val( jQuery.cookies.get('delivery_time', "<?php echo $time_value?>") )
                    .change(function(){jQuery.cookies.set('delivery_time',jQuery(this).val())});

        jQuery("#delivery_date").datepicker( "setDate" ,jQuery.cookies.get('delivery_date', "<?php echo $date_value?>") );
    });
</script>

Answer 1

在您的脚本中编辑此行：

    var daysToAdd = 0
    var mydate = new Date()

将它们更改为：

    var mydate = new Date();
    if (mydate.getHours()>=12) var daysToAdd = 1;
    else var daysToAdd = 0;

强烈建议您开始使用分号;

example

Answer 2

你可以通过 javascript 获取当前时间：

Date.prototype.timeNow = function(){
   return this.getHours();
};

Answer 3

$(function() {
            var current=new Date();
            var hour=current.getHours();
            var year= current.getFullYear();
            var date=current.getDate();
            var month=current.getMonth();
            if (hour>12){
                ++date;
            }
            $( "#date").datepicker({
                changeYear:true,
                changeMonth:true,
                minDate:new Date(year,month,date)
            });
        });