使用 jQuery 创建日期选择器并进行有效性验证-html教程-PHP中文网

使用 jQuery 创建日期选择器并进行有效性验证

心靈之曲

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

原创

554人浏览过

使用 jquery 创建日期选择器并进行有效性验证

本文档旨在指导开发者使用 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> 元素中。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

实现日期有效性验证

为了确保用户选择的日期是有效的，我们需要实现日期有效性验证。

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>

登录后复制