2013-09-24 33 views
2

我在我的网站上使用Jquery datepicker以便客户选择期望的交付日期。目前,我已经设置了4天的分钟日期,不包括周末或节假日。我只是意识到我需要考虑一天中的时间,以便如果某人在下午2点后下订单,那么它不会在该日期的那一天计算(因为出货时间太晚)。jQuery Datepicker minDate占一天中的时间

我能找到几个帖子吧,一个特别适用看来:

How do I restrict dates on datepicker after a certain time

不过,我在将其应用到我的当前脚本(下)一个严重困难的时候。如果有人能告诉我如何适应这一点,那将是非常酷的。

非常感谢您的时间和帮助! 〜苏珊

<script type="text/javascript"> 
    $(document).ready(function() { 

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

    var dateMin = new Date(); 
    var weekDays = AddBusinessDays(4); 

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

    function AddBusinessDays(weekDaysToAdd) { 
    var curdate = new Date(); 
    var realDaysToAdd = 0; 
    while (weekDaysToAdd > 0){ 
     curdate.setDate(curdate.getDate()+1); 
     realDaysToAdd++; 
     //check if current day is business day 
     if (noWeekendsOrHolidays(curdate)[0]) { 
     weekDaysToAdd--; 
     } 
    } 
    return realDaysToAdd; 

    } 

    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, '']; 
    } 
    $('#datepicker').datepicker({ 
     inline: true, 
     beforeShowDay: noWeekendsOrHolidays,   
     showOn: "both",    
     firstDay: 0, 
     dateformat: "dd/mm/yy", 
     changeFirstDay: false, 
     showButtonPanel: true,  
     minDate: dateMin    
    }); 
}); 
</script> 

<p> 
<label for="datepicker">Desired Delivery Date: </label> 
    <input class="input-medium" type="text" id="datepicker" placeholder="ex. 01/01/2013" name="properties[Delivery Date]" readonly /> 
    <label><font size=1>Need it faster? Please call us! (800) 880-0307</font> 
    </label></p> 
<style> 
    #datepicker { height: 20px; } 
    #datepicker {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;} 
</style> 

回答

1

我终于解决了这个问题,所以我发布了一个答案,我自己的问题。希望它能帮助别人。以下是完整的代码,不包括美国国家法定节假日和周末的4天的分钟日期,以及如果在下午2点以后将MinDate调整为排除当前日期的情况。

<script type="text/javascript"> 
    $(document).ready(function() { 

    //holidays 
    var natDays = [ 
     [1, 1, 'New Year'], //2014 
     [1, 20, 'Martin Luther King'], //2014 
     [2, 17, 'Washingtons Birthday'], //2014  
     [5, 26, 'Memorial Day'], //2014 
     [7, 4, 'Independence Day'], //2014 
     [9, 1, 'Labour Day'], //2014 
     [10, 14, 'Columbus Day'], //2013 
     [11, 11, 'Veterans Day'], //2013 
     [11, 28, 'Thanks Giving Day'], //2013 
     [12, 25, 'Christmas'] //2013  
]; 

    var dateMin = new Date(); 
    dateMin.setDate(dateMin.getDate() + (dateMin.getHours() >= 14 ? 1 : 0)); 
    AddBusinessDays(dateMin, 4); 

    function AddBusinessDays(curdate, weekDaysToAdd) { 
     while (weekDaysToAdd > 0) { 
      curdate.setDate(curdate.getDate() + 1); 
      //check if current day is business day 
      if (noWeekendsOrHolidays(curdate)[0]) { 
       weekDaysToAdd--; 
      } 
     } 
    }  

    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, '']; 
    } 
     $('#datepicker').datepicker({ 
      inline: true, 
      beforeShowDay: noWeekendsOrHolidays,   
      showOn: "both",    
      firstDay: 0, 
      dateformat: "dd/mm/yy", 
      changeFirstDay: false, 
      showButtonPanel: true,  
      minDate: dateMin    
    }); 
    }); 
    </script> 

<p> 
<label for="datepicker">Desired Delivery Date: </label> 
    <input class="input-medium" type="text" id="datepicker" placeholder="ex. 01/01/2013" name="properties[Delivery Date]" readonly /> 
    <label><font size=1>Need it faster? Please call us! (800) 880-0307</font> 
    </label></p> 
<style> 
    #datepicker { height: 20px; } 
    #datepicker {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;} 
</style>