javascript - 使用 Javascript 和 ASP.Net 验证日期

Question

我有一个 ASP.Net 表单，用户可以在其中从 Calendar Extender 控件中选择日期，我有 2 个日期字段(FromDate 和 ToDate)。

我想使用 JavaScript 验证以下内容:

• FromDate 应始终小于 ToDate
• FromDate 和 ToDate 不应小于今天的日期。

如果这两个条件都成立，我想从代码隐藏中调用一个方法，该方法将计算选定时间段内的总天数(不包括周末)并将其显示给用户(此方法工作正常)。

在下面的代码中，当满足前面提到的两个条件时，我尝试使用 __doPostBack 来触发代码隐藏方法。它触发代码隐藏方法，但随后 JavaScript 变量变得不正确(compareDate 变量始终在每次函数调用和回发时递增)，因此所有结果都变得不正确。

*下面是我使用 Javascript 验证日期的当前方法，它是从两个文本框的日历扩展器控件的 OnClientDateSelectionChanged 事件触发的 *

<script type="text/javascript">

        var fromDate = new Date();
        var toDate = new Date();

        function checkDate(sender, args) {

            if (sender.get_id() == 'CalendarExtenderFrom') {
                fromDate = sender._selectedDate;
            }
            else if (sender.get_id() == 'CalendarExtenderTo') {
                toDate = sender._selectedDate;
            }

            // Check if selected date is less than today's date
            var todayDate = new Date();
            var year = todayDate.getFullYear();
            var month = todayDate.getMonth();
            var day = todayDate.getDate();
            var dateOnly = new Date(year, month, day);

            if (sender._selectedDate < dateOnly) {
               alert("You cannot select a day earlier than today!");
               sender._textbox.set_Value("");
               return;
            }

            // Check if FromDate > ToDate
            if (document.getElementById('TextBoxDateOfLeave').value != "" && document.getElementById('TextBoxDateOfReturn').value != "") {

                var compareDate = new Date(fromDate.getFullYear(), fromDate.getMonth(), (fromDate.getDate()) + 1, 00, 00, 00, 00);

                if (toDate < compareDate) {

                   alert("(Return Date) should be greater than (Travel Date)");
                   sender._textbox.set_Value("");
                   return;
                }

            }

            // If both conditions are met
            window.__doPostBack('__Page', '');
        }

    </script>

ASP.Net 控件:

<asp:TextBox ID="TextBoxDateOfLeave" runat="server" ClientIDMode="Static" ontextchanged="CalculateLeaveDays"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtenderFrom" runat="server" Enabled="True" Format="dd/MMM/yyyy" TargetControlID="TextBoxDateOfLeave" OnClientDateSelectionChanged="checkDate" />

<asp:TextBox ID="TextBoxDateOfReturn" runat="server" ClientIDMode="Static" ontextchanged="CalculateLeaveDays"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtenderTo" runat="server" Enabled="True" Format="dd/MMM/yyyy" TargetControlID="TextBoxDateOfReturn" OnClientDateSelectionChanged="checkDate" />

<小时/>

请告诉我是否有办法实现这一目标。

谢谢，

Answer 1

你在寻找这样的东西吗？我添加了Fiddle这里。我使用了 jquery ui 日期选择器，但您可以使用您选择的任何日期选择器，只要值是“yyyy/mm/dd”或“mm/dd/yyyy”我认为