在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" />
这些隐藏字段用于存储日期值，以便在需要时检索和使用。
四、结论
通过上述步骤，您可以实现一个带有验证的自定义日期选择器，确保用户选择有效的日期范围。这对于需要日期输入的应用程序（如预订系统或报告筛选器）非常有用。