在Ajax CalendarExtender上选择日期后设置TextBox.Text [英] Setting TextBox.Text after Selecting a Date on an Ajax CalendarExtender

问题描述

在ASP.NET页面上，我在页面上有一对CalendarExtender(用于ASP.NET 4.0的AJAX控件工具包)控件，它们充当日期范围.我想做的是，在用户选择TextCheckInDate的值之后，如果TextCheckOutDate为空，则用TextCheckInDate+ 1填充TextCheckOutDate.

On an ASP.NET page, I have a pair of CalendarExtender (AJAX Control Toolkit for ASP.NET 4.0) controls on a page acting as a date range. What I want to do is, after the user has selected the value for TextCheckInDate , populate TextCheckOutDate with TextCheckInDate+ 1 if TextCheckOutDate is empty.

很遗憾，我的jQuery技能尚未达到我的期望.我知道我必须创建一个TextCheckInDate更改时会触发的jQuery函数，我需要能够读取两个文本框，执行基本的日期算术并写入第二个文本框.该实现使我难以理解.感谢这篇文章，我知道要使用

Regrettably, my jQuery skills aren't yet where I'd like them to be. I know that I have to create a jQuery function that's fired when TextCheckInDate changes, I need to be able to read both textboxes, perform basic date arithmetic and write to the second textbox. The implementation eludes me. Thanks to this post, I know to use date.js for my date arithmetic, included below...

到目前为止我所拥有的:

What I have so far:

$("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));
    }
}

推荐答案

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

Can you prohibit to enter text into date textboxes? If so, you can use following approach:

<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方法中，在下面添加代码:

in PreRender method add code below:

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

这篇关于在Ajax CalendarExtender上选择日期后设置TextBox.Text的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！