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

Question

在ASP.NET页面上，我在页面上有一对CalendarExtender（AJAX控件工具包，用于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

你可以禁止文本输入到文本框的日期？如果是这样，你可以使用以下方法：

在prerender方法

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

添加以下代码：

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() { ... })。