2012-09-03 36 views
1

我有下面的代碼,以兩個日期符合下列條件比較阿賈克斯日曆日期範圍使用JavaScript

場景:

  1. 上載有兩個文本框(FROM日期,TODATE)與Ajax日曆擴展。
  2. On load From Date顯示今天的日期。
  3. 當在兩個文本框(FromDate,ToDate)中選擇了小於今天的日期時,它會提醒用戶說「您不能選擇比今天早的日子!」
  4. ToDate的選定日期< FromDate的選定日期,提醒用戶說「迄今必須大於起始日期」。並同時清除ToDate文本框中選定的日期。

碼塊:

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> 

錯誤屏幕(哼哼:X)

現在TODATE,當您選擇的日期比現在或日期小於沒有fromdate早些時候,TODATE日曆顯示的NaN爲每個日期和,0NaN年

enter image description here

+0

這行代碼究竟幹什麼? 'sender._textbox.set_Value(sender._selectedDate.format(sender._format))' – John

回答

0

它看起來像format方法假定數字參數,但正在傳遞一個字符串參數。註釋掉兩個else塊以確認這一點。該if塊似乎總是返回false,原因如下:

  • 由於這兩個日期是字符串,它們的長度進行比較,而不是他們在每個日期日期
  • 使用Date.parse()做數值比較
  • 使用硬編碼值驗證您的date format,例如Date.parse(「1999年5月1日」)