1

I am using JQuery UI datepicker on my e-commerce site so that customers can select a delivery date. I have set it up so that weekends are greyed out (unselectable). I also have certain holidays greyed out (such as Christmas). As well as this I also have previous dates greyed out so customers can only select dates in the future.

Normally a customer can select 'tomorrow' as the date of delivery but I want to implement a cut off time of 12pm (noon). If the time is currently after 12pm then 'tomorrow' would be greyed out but if the time is before 12pm then they can select 'tomorrow'.

The site is on'y available in the UK and is hosted in the UK so I don't need to worry about international time changes.

I have attached the code I am currently using below.

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

3 回答 3

1

You can get the current time in javascript doing this : 

Date.prototype.timeNow = function(){
   return this.getHours();
};
于 2013-07-08T12:35:52.623 回答
1

edit this lines in you script:

    var daysToAdd = 0
    var mydate = new Date()

change them to:

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

and strongly recomend you start using semicolons ;

example

于 2013-07-08T13:23:41.770 回答
0 
$(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)
            });
        });
于 2020-09-01T10:04:51.380 回答