0

現在、jQuery ui Datepicker を使用しています。私はカレンダーを使用して、顧客がページの 1 つの領域で配送日を選択できるようにしています。週末と休日を除く 4 日間の minDate が設定されています。最終的に計算された minDate をページの別の場所に表示することは可能でしょうか? 商品説明に「最短納期」を表示したい。jQuery と JavaScript の非常に新しい機能です。

ご回答ありがとうございます。

デートピッカーコード:

<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? Call us! (800) 880-0307</font>
  </label></p>
<style>
  #datepicker { height: 19px; }
  #datepicker {-webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}
</style>

日付ピッカーの日付を追加したい場所:

<p style="margin-top: 15px; margin-left: 40px; margin-top: -100px;"><font size=3>Please Choose From Delivery Options:</font></p>        
    <label for="Standard" style=" margin-left: 40px;">
      <input id="Standard" type="radio" name="properties[Delivery]" value="Standard Shipping" />
      <font>Standard Shipping</font><br>
      <font size=1 style="margin-left: 18px;">Earliest Date of Delivery: DATEPICKER DATE HERE </font>
    </label>
4

1 に答える 1

2

datepicker にはいくつかのオプションとメソッドがあります。1 つは、onSelectをdatestring引数として持つです。

これは、datepicker オプション オブジェクトに追加できます。私はあなたが何かを操作し、別の要素に日付を挿入することができます

日付を挿入する必要がある場所にスパンタグを配置します

間のテキストを取り出すことができます

<font size=1 style="margin-left: 18px;">Earliest Date of Delivery: <span id="delivery-date">DATEPICKER DATE HERE </span></font>

jQuery:

下部のフィドルを参照してください。それを機能させるには、機能をオフにする必要がありました。変数noWeekendsOrHolidaysがコードに正しく実装されていれば、問題はありません。

// dateMin is the minimum delivery date
var dateMin = new Date();

// function setDeliverydate sets date elsewhere on the page
function setDeliveryDate(datestring) {
    var deliverdate = new Date(datestring);
    var day = deliverdate.getDate();
    var month = deliverdate.getMonth() + 1;
    var year = deliverdate.getFullYear();

    $("#delivery-date").text(month + "/" + day + "/" + year);

}

// set the initial delivery date
setDeliveryDate(dateMin);


// datepicker to choose a different delivery date
$('#datepicker').datepicker({
    inline: true,
    // beforeShowDay: noWeekendsOrHolidays,
    showOn: "both",
    firstDay: 0,
    dateformat: "dd/mm/yy",
    changeFirstDay: false,
    showButtonPanel: true,
    minDate: dateMin,

    onSelect: function (datestring) {
        setDeliveryDate(datestring);
    }

});

こちら#delivery-dateは納期を導入したいspanタグのidです。

更新: http://jsfiddle.net/djwave28/sZ5jq/21/

実装あり: http://jsfiddle.net/djwave28/sZ5jq/24/

于 2013-09-30T03:06:45.390 に答える