使用JavaScript的Ajax日历日期范围

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

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

Scenario:

On load there are two text boxes (FromDate, ToDate) with Ajax calendar extenders.

在加载时,有两个带有Ajax日历扩展器的文本框(FromDate,ToDate)。

On load From Date shows today's date.

在加载起始日期显示今天的日期。

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

当在两个文本框(FromDate,ToDate)中选择了比今天更少的日期时,它会提醒用户说“你不能选择比今天更早的一天!”

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.

当ToDate的选定日期的选定日期时,提醒用户说“to>

Codeblock:

ASP.NET , AJAX

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)

错误屏幕(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

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

使用JavaScript的Ajax日历日期范围

1 个解决方案

#1

It looks like the format method is assuming a numeric argument, but is being passed a string argument. Comment out both else blocks to confirm this. The if blocks seem to always return false for the following reasons:

看起来格式方法假定一个数字参数,但是传递一个字符串参数。注释掉其他两个块以确认这一点。由于以下原因,if块似乎总是返回false:

Since the two dates are strings, their lengths are compared, not their dates

由于这两个日期是字符串,因此比较它们的长度,而不是它们的日期

Use Date.parse() on each date to do a numeric comparison

在每个日期使用Date.parse()进行数值比较

Validate your date format with a hardcoded value, e.g. Date.parse("May 1, 1999")

使用硬编码值验证您的日期格式,例如Date.parse(“1999年5月1日”)

#1

看起来格式方法假定一个数字参数,但是传递一个字符串参数。注释掉其他两个块以确认这一点。由于以下原因,if块似乎总是返回false:

Since the two dates are strings, their lengths are compared, not their dates

由于这两个日期是字符串,因此比较它们的长度,而不是它们的日期

Use Date.parse() on each date to do a numeric comparison

在每个日期使用Date.parse()进行数值比较

Validate your date format with a hardcoded value, e.g. Date.parse("May 1, 1999")

使用硬编码值验证您的日期格式,例如Date.parse(“1999年5月1日”)

秒客网

使用JavaScript的Ajax日历日期范围

1 个解决方案

#1

#1

相关文章