title: Ajax Calendar Date Range with JavaScript
body: <p>I have the following code to compare two dates with the following conditions</p>
  <blockquote>
  <p>Scenario:</p>
  </blockquote>
  <ol>
  <li>On load there are two text boxes (FromDate, ToDate) with Ajax calendar extenders.</li>
  <li>On load From Date shows today's date.</li>
  <li>when date less than today was selected in both text boxes(FromDate, ToDate), it alerts user saying &quot;You cannot select a day earlier than today!&quot;</li>
  <li>When ToDate's Selected date &lt; FromDate's Selected Date, alerts user saying &quot;To Date must be Greater than From date.&quot; and at the same time it clears the selected Date in ToDate Text box.</li>
  </ol>
  <blockquote>
  <p>Codeblock:</p>
  <p>ASP.NET , AJAX</p>
  </blockquote>
  <pre><code>                &lt;asp:TextBox ID=&quot;txtFrom&quot; runat=&quot;server&quot;
                      ReadOnly=&quot;true&quot;&gt;&lt;/asp:TextBox&gt;
                  &lt;asp:ImageButton ID=&quot;imgBtnFrom&quot; runat=&quot;server&quot; ImageUrl=&quot;~/images/Cal20x20.png&quot; Width=&quot;20&quot; Height=&quot;20&quot; ImageAlign=&quot;TextTop&quot; /&gt;
                  &lt;asp:CalendarExtender ID=&quot;txtFrom_CalendarExtender&quot; PopupButtonID=&quot;imgBtnFrom&quot;
                      runat=&quot;server&quot; Enabled=&quot;True&quot; 
                      OnClientDateSelectionChanged=&quot;checkDate&quot;
                      TargetControlID=&quot;txtFrom&quot; Format=&quot;MMM d, yyyy&quot;&gt;
                  &lt;/asp:CalendarExtender&gt;
                  &lt;asp:TextBox ID=&quot;txtTo&quot; runat=&quot;server&quot; 
                      ReadOnly=&quot;true&quot;&gt;&lt;/asp:TextBox&gt;
                  &lt;asp:ImageButton ID=&quot;imgBtnTo&quot; runat=&quot;server&quot; ImageUrl=&quot;~/images/Cal20x20.png&quot; Width=&quot;20&quot; Height=&quot;20&quot; ImageAlign=&quot;TextTop&quot; /&gt;
                  &lt;asp:CalendarExtender ID=&quot;txtTo_CalendarExtender&quot;   
                      OnClientDateSelectionChanged=&quot;compareDateRange&quot;
                      PopupButtonID=&quot;imgBtnTo&quot;
                      runat=&quot;server&quot; 
                      Enabled=&quot;True&quot; TargetControlID=&quot;txtTo&quot;
                      Format=&quot;MMM d, yyyy&quot;&gt;
                  &lt;/asp:CalendarExtender&gt;
  &lt;asp:HiddenField ID=&quot;hdnFrom&quot; runat=&quot;server&quot; /&gt;
  &lt;asp:HiddenField ID=&quot;hdnTo&quot; runat=&quot;server&quot; /&gt;
  </code></pre>
  <blockquote>
  <p>C# Code</p>
  </blockquote>
  <pre><code>protected void Page_Load(object sender, EventArgs e)
      {
          txtFrom.Text = string.Format(&quot;{0: MMM d, yyyy}&quot;, 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;
              }
          }
      }
  </code></pre>
  <blockquote>
  <p>JavaScript Code</p>
  </blockquote>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
          function checkDate(sender, args) {
              document.getElementById('&lt;%=txtTo.ClientID %&gt;').value = &quot;&quot;;
              if (sender._selectedDate &lt; new Date()) {
                  alert(&quot;You cannot select a day earlier than today!&quot;);
                  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('&lt;%=hdnFrom.ClientID %&gt;').value = sender._selectedDate.format(sender._format);
                  //reset the to date to blank.
                  document.getElementById('&lt;%=txtTo.ClientID %&gt;').value = &quot;&quot;;
              } else {
                  document.getElementById('&lt;%=hdnFrom.ClientID %&gt;').value = sender._selectedDate.format(sender._format);
              }
          }
          function compareDateRange(sender, args) {
              var fromDateString = document.getElementById('&lt;%=txtFrom.ClientID %&gt;').value;
              var fromDate = new Date(fromDateString);
              if (sender._selectedDate &lt; new Date()) {
                  alert(&quot;You cannot select a Date earlier than today!&quot;);
                  sender._selectedDate = &quot;&quot;;
                  sender._textbox.set_Value(sender._selectedDate)
              }
              if (sender._selectedDate &lt;= fromDate) {
                  alert(&quot;To Date must be Greater than From date.&quot;);
                  sender._selectedDate = &quot;&quot;;
                  sender._textbox.set_Value(sender._selectedDate)
              } else {
                  document.getElementById('&lt;%=hdnTo.ClientID %&gt;').value = sender._selectedDate.format(sender._format);
              }
          }
      &lt;/script&gt;
  </code></pre>
  <blockquote>
  <p>Error Screen(Hmmm :X)</p>
  </blockquote>
  <p>Now in ToDate, when you select Date Earlier than today or Date less than FromDate, ToDate Calendar shows NaN for Every Date and ,0NaN for Year</p>
  <p><img src="https://i.stack.imgur.com/ey59G.png" alt="enter image description here" /></p>