0

目前我正在使用 jQuery ui Datepicker。我使用日历允许客户在页面的一个区域选择交货日期，并且它的 minDate 设置为 4 天，不包括周末和节假日。我想知道是否可以在我页面的其他地方显示最终计算出的 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 有几个选项和方法。一个是onSelect具有 thedatestring作为参数的

您可以在 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是您要在其中介绍交货日期的跨度标签的ID。

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

实施：http: //jsfiddle.net/djwave28/sZ5jq/24/

于 2013-09-30T03:06:45.390 回答