2

顧客が希望の配送日を選択できるように、Web サイトで Jquery datepicker を使用しています。現在、週末や祝日を除く minDate を 4 に設定しています。誰かが午後 2 時以降に注文した場合、その日が minDate にカウントされないように、時刻を考慮する必要があることに気付きました (出荷するには遅すぎるため)。

それに関するいくつかの投稿を見つけることができましたが、特に該当するものは次のとおりです。

特定の時間後に日付ピッカーの日付を制限するにはどうすればよいですか

ただし、これを現在のスクリプト (以下) に適用するのは非常に困難です。誰かがこれをどのように適合させるかを教えてくれれば、それは完全にクールです.

お時間をいただき、ありがとうございました。〜スーザン

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

1 に答える 1

1

私はついにこれを解決したので、自分の質問への回答を投稿しています。それが誰かを助けることを願っています。以下は、米国の祝日と週末を除く 4 日間の minDate と、午後 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>
于 2013-09-26T00:52:03.260 に答える