Question

我在我的电子商务网站上使用JQuery UI datepicker，以便客户可以选择交付日期。我把它设置好，以便周末变灰（不可选）。我也有一些灰色的假期（比如圣诞节）。除此之外，我之前的日期也是灰色的，因此客户只能在将来选择日期。

通常客户可以选择'明天'作为交货日期，但我想实施截止时间为中午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

您可以在javascript中获取当前时间：

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

Answer 2

在你的脚本中编辑这一行：

    var daysToAdd = 0
    var mydate = new Date()

将其更改为：

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

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

example

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)
            });
        });

JQuery UI Datepicker在下午12点之后禁用第二天

3 个答案: