Ajax Calendar Date Range with JavaScript

Posted by hungrycoder on Stack Overflow See other posts from Stack Overflow or by hungrycoder
Published on 2012-09-03T17:47:45Z Indexed on 2012/12/05 17:04 UTC
Read the original article Hit count: 167

Filed under:
|
|
|
|

I have the following code to compare two dates with the following conditions

Scenario:

  1. On load there are two text boxes (FromDate, ToDate) with Ajax calendar extenders.
  2. On load From Date shows today's date.
  3. when date less than today was selected in both text boxes(FromDate, ToDate), it alerts user saying "You cannot select a day earlier than today!"
  4. When ToDate's Selected date < FromDate's Selected Date, alerts user saying "To Date must be Greater than From date." and at the same time it clears the selected Date in ToDate Text box.

Codeblock:

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# Code

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 Code

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

Error Screen(Hmmm :X)

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

enter image description here

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about ASP.NET