使用 jQuery 实现日期选择联动及有效性验证-html教程-PHP中文网

使用 jQuery 实现日期选择联动及有效性验证

碧海醫心

发布： 2025-08-20 17:48:18

原创

781人浏览过

使用 jquery 实现日期选择联动及有效性验证

本文旨在提供一种使用 jQuery 实现日期（日、月、年）联动选择，并进行日期有效性验证的方法。通过动态生成日期选项，并结合 JavaScript 的 Date 对象进行校验，确保用户选择的日期是真实存在的，避免无效日期输入。文章将提供详细的代码示例和解释，帮助开发者理解和应用该技术。

实现日期选择联动与验证

以下代码展示了如何使用 jQuery 实现日期选择联动，并验证所选日期的有效性。核心思想是在月份和年份改变时，动态调整日期选项，并利用 JavaScript 的 Date 对象判断日期是否有效。

HTML 结构

首先，我们需要定义 HTML 结构，包含三个 <select> 元素，分别用于选择日、月、年。

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

查看详情

<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> 元素中超出当月最后一天的日期选项。