<input type="date">

<label for="start">Start date:</label>
<input
 type="date"
 id="start"
 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 class="validity"></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 class="validity"></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 class="nativeDatePicker">
 <label for="bday">Enter your birthday:</label>
 <input type="date" id="bday" name="bday" />
 <span class="validity"></span>
 </div>
 <p class="fallbackLabel">Enter your birthday:</p>
 <div class="fallbackDatePicker">
 <span>
 <label for="day">Day:</label>
 <select id="day" name="day"></select>
 </span>
 <span>
 <label for="month">Month:</label>
 <select id="month" 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 id="year" 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年8月6日⁩ by MDN contributors.