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

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

心靈之曲

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

原创

558人浏览过

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

本文档旨在指导开发者使用 jQuery 创建一个包含日、月、年三个下拉选择框的日期选择器，并实现基本的日期有效性验证，避免用户选择无效日期。通过示例代码，开发者可以学习如何动态生成选项、处理日期逻辑以及使用 JavaScript 的 Date 对象进行日期验证。

创建日期选择器

首先，我们需要创建 HTML 结构，包含三个

<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
  })
});

登录后复制

这段代码首先获取了日、月、年三个元素中。

JoinMC智能客服

JoinMC智能客服，帮您熬夜加班，7X24小时全天候智能回复用户消息，自动维护媒体主页，全平台渠道集成管理，电商物流平台一键绑定，让您出海轻松无忧！

193

查看详情

实现日期有效性验证

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

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 函数用于返回指定年月下的最后一天。

完整示例代码




  Date Selector with jQuery
  



<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) =&gt; {
  const date = new Date(year,month,day,15,0,0,0)
  return date.getMonth() === month &amp;&amp; date.getDate() === day; // valid date
};
const getLastDay = (year, month) =&gt; 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) =&gt; {
      date.setMonth(i);
      return `&lt;option value=&quot;${i}&quot;&gt;${date.toLocaleString(&quot;en-US&quot;,{ month: &quot;long&quot; })}&lt;/option&gt;`;
    })
  );

  const endYear = date.getFullYear();
  const years = [];
  for (let i = endYear, n = endYear - 110; i &gt;= n; i--) years.push(`&lt;option value=&quot;${i}&quot;&gt;${i}&lt;/option&gt;`);
  $year.append(years.join(&quot;&quot;));

  $day.append(
    Array.from({
      length: 31
    }).map((_, i) =&gt; `&lt;option value=&quot;${i+1}&quot;&gt;${i+1}&lt;/option&gt;`)
  );
  const $days = $day.find(&quot;option&quot;);

  $('#day, #month, #year').on(&quot;change&quot;,(e) =&gt; {
    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&gt;lastDay) $day.val(&quot;day&quot;); // reset
    for (let i = lastDay; i&lt;=32; i++) $days.eq(i).prop(&quot;disabled&quot;,i&gt;lastDay); // toggle disabled
  })
});
</script>

登录后复制