使用jQuery实现自定义日期选择器及验证

在Web应用中，日期选择器是收集用户日期输入的重要工具。本文将详细介绍如何使用jQuery创建一个带有自定义验证的日期选择器，包括设置日期范围和确保用户只能选择允许的时间段内的日期。

一、HTML结构

首先，我们需要构建HTML结构，使用两个文本框分别表示“开始日期”和“结束日期”。

<tr>
    <td style="text-align: right; width: 21%">开始日期:</td>
    <td style="text-align: left; width: 25%">
        <asp:TextBox ID="Fromdate" runat="server" CssClass="form-control"></asp:TextBox>
    </td>
    <td style="text-align: right; width: 20%">结束日期:</td>
    <td style="text-align: left; width: 30%">
        <asp:TextBox ID="Todate" runat="server" CssClass="form-control"></asp:TextBox>
    </td>
</tr>

这里，我们有两个用于日期输入的TextBox控件，分别是Fromdate和Todate。

二、添加jQuery日期选择器

接下来，我们将初始化jQuery日期选择器。日期选择器允许用户通过日历弹出窗口选择日期。

$(function () {
    // 获取隐藏字段
    var hdnFromDate = $("#<%=hdnFromDate.ClientID %>");
    var hdnToDate = $("#<%=hdnToDate.ClientID %>");
    var hdnFromdatetext = $("#<%=hdnFromdatetext.ClientID %>");
    var hdnToDatetext = $("#<%=hdnToDatetext.ClientID %>");

    // 获取当前日期和7天前的日期
    var currentDate = new Date();
    var previousDate = new Date();
    previousDate.setDate(currentDate.getDate() - 7);

    // 初始化日期选择器并设置正确的日期
    $("#<%= Fromdate.ClientID %>").datepicker({
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: previousDate,
        maxDate: currentDate,
        onSelect: function (dateText, inst) {
            var selectedDate = new Date(dateText);
            $("#<%= Todate.ClientID %>").datepicker("option", "minDate", selectedDate);
            hdnFromdatetext.val(dateText);
            h knullFromdatetext
        }
    }).datepicker("setDate", hdnFromdatetext.val() === "0" ? previousDate : hdnFromdatetext.val());

    $("#<%= Todate.ClientID %>").datepicker({
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: currentDate,
        maxDate: currentDate,
        onSelect: function (dateText, inst) {
            var selectedDate = new Date(dateText);
            $("#<%= Fromdate.ClientID %>").datepicker("option", "maxDate", selectedDate);
            hdnToDatetext.val(dateText);
            hdnToDate.val(dateText);
        }
    }).datepicker("setDate", hdnToDatetext.val() === "0" ? currentDate : hdnToDatetext.val());
});

2.1 初始化日期选择器

我们在Fromdate和Todate文本框上初始化日期选择器，并设置日期格式为yy-mm-dd。

2.2 默认日期

Fromdate字段默认值为当前日期的前7天，Todate字段默认值为当前日期。

2.3 验证

Fromdate选择器确保选择的日期不晚于Todate。 Todate选择器确保选择的日期不早于Fromdate。

三、在隐藏字段中存储日期

为了在页面刷新或表单提交后仍能保留选定的日期，我们将日期值存储在隐藏字段中。

<asp:HiddenField runat="server" ID="hdnFromDate" Value="0" />
<asp:HiddenField runat="server" ID="hdnToDate" Value="0" />
<asp:HiddenField runat="server" ID="hdnFromdatetext" Value="0" />
</epl<pot>
<asp:HiddenField runat="server" ID="hdnToDatetext" Value="0" />

这些隐藏字段用于存储日期值，以便在需要时检索和使用。

四、结论

通过上述步骤，您可以实现一个带有验证的自定义日期选择器，确保用户选择有效的日期范围。这对于需要日期输入的应用程序（如预订系统或报告筛选器）非常有用。