0

我在 ASP 经典页面中有以下三个输入框，每个输入框都与相应的 jquery datepicker 日历相关联：

<br />
Start Date: <input type="text" id="dtpDateStart" name="dtpDateStart" />
<br />
<br />
End Date:   <input type="text" id="dtpDateEnd" name="dtpDateEnd" />
<br />
<br />
Return By:  <input type="text" id="dtpDateReturn" name="dtpDateReturn" />
<br />

和 JQuery 脚本：

<script type="text/javascript">
$(function () {
    $("#dtpDateStart").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateEnd").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#dtpDateEnd").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateStart").datepicker("option", "maxDate", selectedDate);
            $("#dtpDateReturn").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#dtpDateReturn").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateEnd").datepicker("option", "maxDate", selectedDate);
        }
    });

});

在开始日期日历 (dtpDateStart) 中选择日期后，结束日期 (dtpDateEnd) 日历将只允许显示开始日期之后的日期。以此类推，返回日期日历 (dtpDateReturn)。

但我现在需要在功能上再添加两项：

  1. 在页面加载时，将今天的日期填入开始和结束输入字段，将明天的日期填入 ReturnBy 输入字段。

  2. 如果 StartDate 已更改，则自动将 EndDate 和 ReturnByDate 字段更新为相同的日期（或 +1），如果其中已经存在的日期在 StartDate 之前（否则，如果它们在 StartDate 之后，则保留它们）

我在一个简单的日历中的其他地方工作的第一个项目具有以下内容：

$("#jqDatePicker").datepicker("setDate", new Date);

但似乎无法将其滚动到上述功能中。

有什么建议么？

4

1 回答 1

0

不确定回答我自己的问题而不是编辑它的礼仪，但我最终做了什么。根据@jesus.tesh 的建议，我通过服务器端将值（即今天的日期）添加到页面加载的输入字段中，例如

<% 
  Dim todaysDate 
  todaysDate = Date()
%>

<input type="text" id="dtpDateEnd" name="dtpDateEnd" value="<%=todaysDate%>" />

我还更改了上面的 javascript/jQuery 以更好地满足我的需求：

<script type="text/javascript">

$(function () {
    $("#dtpDateReturn").datepicker({ beforeShowDay: $.datepicker.noWeekends, dateFormat: 'm/d/yy', changeMonth: true, changeYear: true });
    $("#dtpDateReturn").datepicker("setDate", +1);
});

$(function () {
    $("#dtpDateStart").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateEnd").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#dtpDateEnd").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedReturnDate) {
            $("#dtpDateReturn").datepicker("option", "minDate", selectedReturnDate);
        }
    });

    $("#dtpDateReturn").datepicker( {});
});

它几乎可以满足我的需要

于 2013-06-07T16:05:05.990 回答