使用JavaScript的Ajax日历日期范围

时间:2012-09-03 17:47:45

标签: javascript asp.net ajax calendar nan

我有以下代码来比较具有以下条件的两个日期

  

情景:

  1. 在加载时,有两个带有Ajax日历扩展器的文本框(FromDate,ToDate)。
  2. 载入日期显示今天的日期。
  3. 当在两个文本框(FromDate,ToDate)中选择了比今天更少的日期时,它会提醒用户说“你不能选择比今天更早的日子!”
  4. 当ToDate的选定日期<从日期的选定日期,提醒用户说“到日期必须大于从日期开始”。并同时清除ToDate文本框中的选定日期。
  5.   

    码块:

         

    ASP.NET,AJAX

                    <asp:TextBox ID="txtFrom" runat="server"
                        ReadOnly="true"></asp:TextBox>
                    <asp:ImageButton ID="imgBtnFrom" runat="server" ImageUrl="~/images/Cal20x20.png" Width="20" Height="20" ImageAlign="TextTop" />
                    <asp:CalendarExtender ID="txtFrom_CalendarExtender" PopupButtonID="imgBtnFrom"
                        runat="server" Enabled="True" 
                        OnClientDateSelectionChanged="checkDate"
                        TargetControlID="txtFrom" Format="MMM d, yyyy">
                    </asp:CalendarExtender>
                    <asp:TextBox ID="txtTo" runat="server" 
                        ReadOnly="true"></asp:TextBox>
                    <asp:ImageButton ID="imgBtnTo" runat="server" ImageUrl="~/images/Cal20x20.png" Width="20" Height="20" ImageAlign="TextTop" />
                    <asp:CalendarExtender ID="txtTo_CalendarExtender"   
                        OnClientDateSelectionChanged="compareDateRange"
                        PopupButtonID="imgBtnTo"
                        runat="server" 
                        Enabled="True" TargetControlID="txtTo"
                        Format="MMM d, yyyy">
                    </asp:CalendarExtender>
    <asp:HiddenField ID="hdnFrom" runat="server" />
    <asp:HiddenField ID="hdnTo" runat="server" />
    
      

    C#代码

    protected void Page_Load(object sender, EventArgs e)
        {
            txtFrom.Text = string.Format("{0: MMM d, yyyy}", DateTime.Today);
            if (Page.IsPostBack)
            {
                if (!String.IsNullOrEmpty(hdnFrom.Value as string))
                {
                    txtFrom.Text = hdnFrom.Value;
                }
                if (!String.IsNullOrEmpty(hdnTo.Value as string))
                {
                    txtTo.Text = hdnTo.Value;
                }
            }
        }
    
      

    JavaScript代码

    <script type="text/javascript">
            function checkDate(sender, args) {
                document.getElementById('<%=txtTo.ClientID %>').value = "";
                if (sender._selectedDate < new Date()) {
                    alert("You cannot select a day earlier than today!");
                    sender._selectedDate = new Date();
                    // set the date back to the current date
                    sender._textbox.set_Value(sender._selectedDate.format(sender._format));
                    //assign the value to the hidden field.
                    document.getElementById('<%=hdnFrom.ClientID %>').value = sender._selectedDate.format(sender._format);
                    //reset the to date to blank.
                    document.getElementById('<%=txtTo.ClientID %>').value = "";
                } else {
                    document.getElementById('<%=hdnFrom.ClientID %>').value = sender._selectedDate.format(sender._format);
                }
            }
            function compareDateRange(sender, args) {
                var fromDateString = document.getElementById('<%=txtFrom.ClientID %>').value;
                var fromDate = new Date(fromDateString);
                if (sender._selectedDate < new Date()) {
                    alert("You cannot select a Date earlier than today!");
                    sender._selectedDate = "";
                    sender._textbox.set_Value(sender._selectedDate)
                }
                if (sender._selectedDate <= fromDate) {
                    alert("To Date must be Greater than From date.");
                    sender._selectedDate = "";
                    sender._textbox.set_Value(sender._selectedDate)
                } else {
                    document.getElementById('<%=hdnTo.ClientID %>').value = sender._selectedDate.format(sender._format);
                }
            }
        </script>
    
      

    错误屏幕(Hmmm:X)

    现在在ToDate中,当您选择比今天更早的日期或低于FromDate的日期时,ToDate日历显示每个日期的NaN和年份的0NaN

    enter image description here

1 个答案:

答案 0 :(得分:0)

看起来format方法假定一个数字参数,但是传递了一个字符串参数。注释掉else块以确认这一点。由于以下原因,if块似乎始终返回false

  • 由于两个日期是字符串,因此比较它们的长度,而不是它们的日期
  • 在每个日期使用Date.parse()进行数字比较
  • 使用硬编码值验证您的date format,例如Date.parse(“1999年5月1日”)