Question

目前我正在使用jQuery ui Datepicker。我正在使用日历允许客户在页面的一个区域中选择交货日期，并且设置的最小日期为4天，不包括周末和假日。我想知道是否可以在我的页面上的其他地方显示最终计算的minDate？我想在产品说明中显示“最早可能的交货日期”。非常非常新的jQuery和javascript。

提前感谢您的回答！

Datepicker代码：

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

我想添加datepicker日期：

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

Answer 1

datepicker有几个options and methods。一个是以onSelect作为参数的datestring

您可以在datepicker选项对象中添加它。我在那里你可以操纵东西并在一个单独的元素中注入日期

将span标记放在需要注明日期的位置

您可以在

之间取出文字

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

在页面的其他位置显示jQuery Datepicker计算日期

1 个答案: