<label for="start">Start date:</label><input  type="date"   name="trip-start"  value="2018-07-22"  min="2018-01-01"  max="2018-12-31" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

<input type="date" value="2017-06-01" />

备注：有一点需要注意的是，在格式方面显示的日期与实际的value 不一样——显示的日期格式取决于用户浏览器的区域设定，而经解析的value 的格式始终为yyyy-mm-dd。

const dateControl = document.querySelector('input[type="date"]');dateControl.value = "2017-06-01";console.log(dateControl.value); // prints "2017-06-01"console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

备注：当用户输入的数据不符合步进配置时，用户代理可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。

备注：将date 输入的step 值指定为any 与指定为1 的效果相同。

<form action="https://example.com">  <label>    Enter your birthday:    <input type="date" name="bday" />  </label>  <p><button>Submit</button></p></form>

<form>  <label>    Choose your preferred party date:    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />  </label></form>

备注：你应该可以使用step 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在撰写这篇文章的时候，还没有可靠的实现。

<form>  <label>    Choose your preferred party date (required, April 1st to 20th):    <input      type="date"      name="party"      min="2017-04-01"      max="2017-04-20"      required />    <span></span>  </label>  <p>    <button>Submit</button>  </p></form>

label {  display: flex;  align-items: center;}span::after {  padding-left: 5px;}input:invalid + span::after {  content: "✖";}input:valid + span::after {  content: "✓";}

警告：客户端表单验证不能替代服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。

<form>  <label>    Enter your birthday:    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />    <span></span>  </label>  <p>    <button>Submit</button>  </p></form>

span {  position: relative;}span::after {  right: -18px;  position: absolute;}input:invalid + span::after {  content: "✖";}input:valid + span::after {  content: "✓";}

<form>  <div>    <label for="bday">Enter your birthday:</label>    <input type="date" name="bday" />    <span></span>  </div>  <p>Enter your birthday:</p>  <div>    <span>      <label for="day">Day:</label>      <select name="day"></select>    </span>    <span>      <label for="month">Month:</label>      <select name="month">        <option selected>January</option>        <option>February</option>        <option>March</option>        <option>April</option>        <option>May</option>        <option>June</option>        <option>July</option>        <option>August</option>        <option>September</option>        <option>October</option>        <option>November</option>        <option>December</option>      </select>    </span>    <span>      <label for="year">Year:</label>      <select name="year"></select>    </span>  </div></form>

span {  padding-left: 5px;}input:invalid + span::after {  content: "✖";}input:valid + span::after {  content: "✓";}

// 获取 UI 元素const nativePicker = document.querySelector(".nativeDatePicker");const fallbackPicker = document.querySelector(".fallbackDatePicker");const fallbackLabel = document.querySelector(".fallbackLabel");const yearSelect = document.querySelector("#year");const monthSelect = document.querySelector("#month");const daySelect = document.querySelector("#day");// 最初，隐藏回退元素fallbackPicker.style.display = "none";fallbackLabel.style.display = "none";// 测试一个新的 date 输入框是否会回退至 text 输入框const test = document.createElement("input");try {  test.type = "date";} catch (e) {  console.log(e.message);}// 如果回退了，运行 if 代码块中的代码if (test.type === "text") {  // 隐藏原生选择器，显示回退元素  nativePicker.style.display = "none";  fallbackPicker.style.display = "block";  fallbackLabel.style.display = "block";  // 动态生成天数和年数  // 由于硬编码的缘故，月份总是相同的  populateDays(monthSelect.value);  populateYears();}function populateDays(month) {  // 从当前的 <select> 中删除当前的 <option> 元素集，  // 为下一个集合的注入做准备。  while (daySelect.firstChild) {    daySelect.removeChild(daySelect.firstChild);  }  // 创建保存注入新的天数的变量  let dayNum;  // 31 天还是 30 天？  if (    [      "January",      "March",      "May",      "July",      "August",      "October",      "December",    ].includes(month)  ) {    dayNum = 31;  } else if (["April", "June", "September", "November"].includes(month)) {    dayNum = 30;  } else {    // 如果是 2 月，计算其是否为闰年    const year = yearSelect.value;    const isLeap = new Date(year, 1, 29).getMonth() === 1;    dayNum = isLeap ? 29 : 28;  }  // 将适当数量的新 <option> 元素注入到当前的 <select> 元素中。  for (let i = 1; i <= dayNum; i++) {    const option = document.createElement("option");    option.textContent = i;    daySelect.appendChild(option);  }  // 如果之前的天数已经设定，将 daySelect 的值设置为那一天，以防止当年数改变时天数被重置为1  if (previousDay) {    daySelect.value = previousDay;    // 如果前一天被设定为一个较高的数字，例如31，然后你选择了一个总天数较少的月份（例如2月），    // 这部分代码就会确保可用的最大日期被选中，而不是显示一个空白的 daySelect    if (daySelect.value === "") {      daySelect.value = previousDay - 1;    }    if (daySelect.value === "") {      daySelect.value = previousDay - 2;    }    if (daySelect.value === "") {      daySelect.value = previousDay - 3;    }  }}function populateYears() {  // 获取今年的年份数字  const date = new Date();  const year = date.getFullYear();  // 使今年以及之前的 100 年都能在 <select> 中选取。  for (let i = 0; i <= 100; i++) {    const option = document.createElement("option");    option.textContent = year - i;    yearSelect.appendChild(option);  }}// 当月或年的 <select> 值改变时，重新运行 populateDays()// 使得该变化影响到可用的天数yearSelect.onchange = () => {  populateDays(monthSelect.value);};monthSelect.onchange = () => {  populateDays(monthSelect.value);};// 保留选择的天数let previousDay;// 更新之前设定的日期// 用法请查看 populateDays() 的结尾daySelect.onchange = () => {  previousDay = daySelect.value;};

备注：请记住有些年份有 53 周（见每年的周数）！当你在开发产品应用时应当考虑这个问题。

Help improve MDN

This page was last modified on⁨2025年11月4日⁩ byMDN contributors.