在 Ajax CalendarExtender 上选择日期后设置 TextBox.Text

Question

在 ASP.NET 页面上，我在页面上有一对 CalendarExtender（ASP.NET 4.0 的 AJAX 控制工具包）控件，充当日期范围。我想要做的是，在用户选择 TextCheckInDate 的值后，如果 TextCheckOutDate 则使用 TextCheckInDate+ 1 填充 TextCheckOutDate代码> 为空。

遗憾的是，我的 jQuery 技能还没有达到我想要的水平。我知道我必须创建一个在 TextCheckInDate 更改时触发的 jQuery 函数，我需要能够读取两个文本框，执行基本的日期算术并写入第二个文本框。实施让我困惑。感谢 这篇文章，我知道使用 date.js 用于我的日期算术，包括在下面......

到目前为止我所拥有的：

$("input[id$='TextCheckInDate']").keyup
    (function (e) {
        checkCheckOutDate( $("#TextCheckInDate").val() );
    }
    );


function checkCheckOutDate(checkInDate) {
    var startDate = Date.parse(checkInDate);
    if ($("#TextCheckOutDate").val() == "") {
        $("#TextCheckOutDate").val((1).days().after(startDate));
    }
}

Answer 1

您可以禁止在日期文本框中输入文本吗？如果是这样，您可以使用以下方法：

<script type="text/javascript">
    function checkInDateChanged(sender, args) {
        var checkInDate = sender.get_selectedDate();

        var checkOutDateExtender = $find("CheckOutdateExtender");
        var checkOutdate = checkOutDateExtender.get_selectedDate();
        if (checkOutdate == null || checkOutdate < checkInDate) {
            checkOutdate = new Date(checkInDate.setDate(checkInDate.getDate() + 1));
            checkOutDateExtender.set_selectedDate(checkOutdate);
        }
    }
</script>
<asp:TextBox runat="server" ID="TextCheckInDate" />
<ajax:CalendarExtender runat="server" ID="CheckInDateCalendarExtender" TargetControlID="TextCheckInDate"
    OnClientDateSelectionChanged="checkInDateChanged" />

<asp:TextBox runat="server" ID="TextCheckOutDate" />
<ajax:CalendarExtender runat="server" ID="CheckOutDateCalendarExtender" BehaviorID="CheckOutdateExtender"
    TargetControlID="TextCheckOutDate" />

在 PreRender 方法中添加以下代码：

TextCheckInDate.Attributes.Add("readOnly", "readonly");
TextCheckOutDate.Attributes.Add("readOnly", "readonly");

Answer 2

您应该能够稍微调整代码，以便在签入文本框的 change 事件触发时也触发 checkCheckOutDate() 函数。

$("input[id$='TextCheckInDate']").bind('keyup,change', function (e) {
    checkCheckOutDate( $("#TextCheckInDate").val() );
});


function checkCheckOutDate(checkInDate) {
    var startDate = Date.parse(checkInDate);
    if ($("#TextCheckOutDate").val() == "") {
        $("#TextCheckOutDate").val((1).days().after(startDate));
    }
}

请注意，jQuery 中的许多事件方法（例如 click()、keyup() 等）只是 bind('click', function() { ... })。