本文旨在提供一种使用 jQuery 实现日期（日、月、年）联动选择，并进行日期有效性验证的方法。通过动态生成日期选项，并结合 JavaScript 的 Date 对象进行校验，确保用户选择的日期是真实存在的，避免无效日期输入。文章将提供详细的代码示例和解释，帮助开发者理解和应用该技术。
实现日期选择联动与验证
以下代码展示了如何使用 jQuery 实现日期选择联动，并验证所选日期的有效性。核心思想是在月份和年份改变时，动态调整日期选项，并利用 JavaScript 的 Date 对象判断日期是否有效。
HTML 结构
首先，我们需要定义 HTML 结构，包含三个 <select> 元素，分别用于选择日、月、年。
<form class="container">
<select id="day" name="dd">
<option selected disabled value="day">Day</option>
</select>
<select id="month" name="mm">
<option selected disabled value="month">Month</option>
</select>
<select id="year" name="yyyy"><option selected disabled value="year">Year</option></select>
</form>JavaScript 代码
接下来，我们使用 JavaScript 和 jQuery 来填充 <select> 元素，并实现联动和验证逻辑。
const isValid = (year,month,day) => {
const date = new Date(year,month,day,15,0,0,0)
return date.getMonth() === month && date.getDate() === day; // valid date
};
const getLastDay = (year, month) => new Date(year,month+1,0,15,0,0,0).getDate();
$(function() {
const $year = $('#year');
const $month = $('#month');
const $day = $('#day');
const date = new Date();
date.setDate(15); // arbitrary, but not 1
$month.append(
Array.from({
length: 12
}).map((_, i) => {
date.setMonth(i);
return `<option value="${i}">${date.toLocaleString("en-US",{ month: "long" })}</option>`;
})
);
const endYear = date.getFullYear();
const years = [];
for (let i = endYear, n = endYear - 110; i >= n; i--) years.push(`<option value="${i}">${i}</option>`);
$year.append(years.join(""));
$day.append(
Array.from({
length: 31
}).map((_, i) => `<option value="${i+1}">${i+1}</option>`)
);
const $days = $day.find("option");
$('#day, #month, #year').on("change",(e) => {
const month = +$month.val();
const year = +$year.val();
const day = +$day.val();
if (day === null || month === null || year === null) return; // nothing selected
if (isValid(year,month,day)) return; // ok date
const lastDay = getLastDay(year,month)
if (day>lastDay) $day.val("day"); // reset
for (let i = lastDay; i<=32; i++) $days.eq(i).prop("disabled",i>lastDay); // toggle disabled
})
});代码解释
- isValid(year, month, day) 函数: 这个函数使用 Date 对象来验证日期是否有效。它创建一个 Date 对象，然后检查其 getMonth() 和 getDate() 方法返回的值是否与传入的 month 和 day 参数一致。如果一致，则表示日期有效。
- getLastDay(year, month) 函数: 这个函数返回指定年份和月份的最后一天。它通过创建一个下个月的 Date 对象，然后将其日期设置为 0 来实现。
- $(function() { ... }): 这是一个 jQuery 的简写形式，等同于 $(document).ready(function() { ... })，确保在 DOM 加载完成后执行代码。
- 变量定义: 获取对日、月、年 <select> 元素的引用。
- 填充月份: 使用 Array.from 创建一个包含 12 个元素的数组，然后使用 map 方法生成月份的 <option> 元素。 toLocaleString("en-US",{ month: "long" }) 用于获取月份的完整名称。
- 填充年份: 生成从当前年份到 110 年前的年份的 <option> 元素。
- 填充日期: 生成 31 个日期的 <option> 元素。
-
change 事件处理: 当日、月、年 <select> 元素的值发生改变时，触发此事件。
- 获取选定的日、月、年值。
- 如果任何一个值为空，则直接返回，不执行任何操作。
- 使用 isValid 函数验证日期是否有效。如果有效，则直接返回。
- 使用 getLastDay 函数获取当月最后一天。
- 如果选择的日期大于当月最后一天，则将日期重置为 "day"。
- 禁用日期 <select> 元素中超出当月最后一天的日期选项。
注意事项
- 确保引入 jQuery 库。
- 可以根据实际需求调整年份的范围。
- 可以根据需要自定义日期格式和错误提示。
- 为了更好的用户体验，可以在日期无效时给出明确的提示信息。
总结
通过以上步骤，我们成功地使用 jQuery 实现了一个具有日期联动和有效性验证的日期选择器。这种方法可以有效地避免用户输入无效日期，提高用户体验。开发者可以根据自己的实际需求，对代码进行修改和扩展，以满足不同的应用场景。
