【问题标题】:jQuery Datepicker minDate accounting for time of dayjQuery Datepicker minDate 占一天中的时间
【发布时间】:2013-09-24 23:12:13
【问题描述】:

我在我的网站上使用 Jquery datepicker 以便客户选择所需的交货日期。目前,我已将其设置为 minDate 4,不包括周末或节假日。我刚刚意识到我需要考虑一天中的时间,这样如果有人在下午 2 点之后下订单,它就不会在 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>

【问题讨论】:

    标签: jquery datepicker mindate


    【解决方案1】:

    我终于解决了这个问题,所以我发布了我自己问题的答案。希望它可以帮助某人。下面是完整的代码,其中 minDate 为 4 天,不包括美国国定假日和周末,以及 minDate 调整以排除当前日期(如果它在下午 2 点之后)。

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

    【讨论】:

      猜你喜欢
      • 2013-06-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多