Question

在ASP.NET页面上，我在一个充当日期范围的页面上有一对CalendarExtender（AJAX Control Toolkit for ASP.NET 4.0）控件。我想要做的是，在用户选择TextCheckInDate的值后，如果TextCheckOutDate为空，请使用TextCheckInDate+ 1填充TextCheckOutDate。

令人遗憾的是，我的jQuery技能还没有达到我想要的程度。我知道我必须创建一个在TextCheckInDate更改时触发的jQuery函数，我需要能够读取两个文本框，执行基本日期算术并写入第二个文本框。实施不包括我。感谢this post，我知道使用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

当签到文本框的checkCheckOutDate()事件触发时，您应该能够略微调整代码以激活change函数。

$("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() { ... })的包装。

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

2 个答案: