本文档旨在指导开发者使用 jQuery 创建一个包含日、月、年三个下拉选择框的日期选择器，并实现基本的日期有效性验证，避免用户选择无效日期。通过示例代码，开发者可以学习如何动态生成选项、处理日期逻辑以及使用 JavaScript 的 Date 对象进行日期验证。
创建日期选择器
首先，我们需要创建 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>使用 jQuery 动态生成选项
接下来，我们使用 jQuery 动态生成日、月、年的选项。
$(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
})
});这段代码首先获取了日、月、年三个 <select> 元素的 jQuery 对象。然后，使用 Array.from 和 map 方法动态生成月份的选项，并使用 toLocaleString 方法获取月份的完整英文名称。 接着，生成年份的选项，从当前年份倒推 110 年。 最后，生成日期的选项，并将其添加到 <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();isValid 函数接受年、月、日作为参数，创建一个 Date 对象，并检查 Date 对象返回的月份和日期是否与传入的参数一致。如果一致，则表示日期有效。 getLastDay 函数用于返回指定年月下的最后一天。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Date Selector with jQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<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>
<script>
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
})
});
</script>
</body>
</html>注意事项
- 确保引入 jQuery 库。
- 可以根据实际需求调整年份的范围。
- 可以根据需要自定义日期格式。
- 本示例仅实现了基本的日期有效性验证，可以根据实际需求添加更复杂的验证逻辑。
总结
本文档介绍了如何使用 jQuery 创建一个包含日、月、年三个下拉选择框的日期选择器，并实现了基本的日期有效性验证。通过学习本文档，开发者可以掌握动态生成选项、处理日期逻辑以及使用 JavaScript 的 Date 对象进行日期验证的技巧。
