最直接的方式是使用<input type="date">并结合min、max和value属性来限制范围和设置默认值，它在不同浏览器中表现不一致且难以自定义样式，获取的日期值为yyyy-mm-dd格式的字符串，需手动转换为date对象进行前端处理，对于ui一致性要求高的项目建议使用javascript日期库。
在HTML中设置表单日期选择，最直接且现代的方式就是使用
<input type="date">。它能为用户提供一个原生的日期选择器界面，省去了我们自己编写复杂JavaScript代码的麻烦。
就这么一行，浏览器会根据用户系统和浏览器的不同，自动呈现一个日期选择界面。比如在桌面端，你可能会看到一个日历小组件；在移动端，它可能会调用系统原生的日期滚轮。它的值总是以
YYYY-MM-DD的格式提交，这个格式在后端处理时通常也比较友好。我个人觉得，对于大多数不追求极致UI统一的项目来说，这个原生控件简直是福音，因为它自带了好多无障碍特性，而且不用加载额外的库。
<label for="eventDate">选择活动日期:</label> <input type="date" id="eventDate" name="eventDate">
如何限制日期选择范围或设置默认值？
很多时候，我们不希望用户能选择任意日期，比如一个活动报名，你可能只允许选择未来某段时间内的日期。这时候，
min和
max属性就派上用场了。
立即学习“前端免费学习笔记（深入）”；
min属性可以设置可选的最小日期，
max属性则设置可选的最大日期。它们的格式也必须是
YYYY-MM-DD。
举个例子，如果你想让用户只能选择2023年1月1日到2023年12月31日之间的日期，可以这样写：
<label for="validDate">选择有效日期 (2023年内):</label> <input type="date" id="validDate" name="validDate" min="2023-01-01" max="2023-12-31">
至于设置默认值，那就更简单了，用
value属性就行。比如你想让日期输入框默认显示今天的日期，你可以在后端动态生成今天的日期字符串（
YYYY-MM-DD格式）然后赋值给
value。
<label for="defaultDate">默认今天的日期:</label> <input type="date" id="defaultDate" name="defaultDate" value="2023-10-26"> <!-- 假设今天是2023年10月26日 -->
这些属性的组合使用，能让我们在不写JavaScript的情况下，对日期选择做很多基础的控制。
原生日期选择器在不同浏览器下表现一致吗？它的外观能自定义吗？
说实话，这是个老生常谈的问题，也是原生日期选择器的一个“痛点”。不同浏览器，甚至同一浏览器在不同操作系统下，
<input type="date">的渲染效果和交互体验差异是很大的。Chrome、Firefox、Safari、Edge，它们各自有自己的实现方式，有的简洁，有的功能更丰富一点。比如在某些浏览器里，日期输入框可能自带一个“清除”按钮，而在另一些就没有。这确实给追求像素级完美的前端开发者带来不少挑战。
至于外观自定义，嗯，这方面原生控件的自由度非常低。你基本只能通过CSS修改
input元素本身的一些基础样式，比如字体大小、边框颜色、背景色等。但对于弹出日历本身的样式（比如日历的布局、月份切换按钮的颜色、选中日期的背景色等等），CSS几乎无能为力。这是因为这些组件通常是浏览器原生UI的一部分，被“影子DOM”（Shadow DOM）封装起来了，外部CSS很难穿透进去。
所以，如果你的项目对日期选择器的UI统一性或高度自定义有严格要求，那么很遗憾，你可能需要放弃原生控件，转而使用JavaScript日期选择库，比如Flatpickr、Pikaday、或者jQuery UI Datepicker等。这些库能提供跨浏览器一致的体验和丰富的定制选项，但代价就是你需要引入额外的CSS和JS文件，并且自己处理一些逻辑。我个人倾向于，如果产品经理没特别要求，能用原生就用原生，省心。但如果非要统一，那就果断上JS库，别在原生控件上死磕样式了，那是条不归路。
如何处理用户选择的日期数据？
用户通过
<input type="date">选择日期后，你通常会想在JavaScript里获取这个值，或者提交到后端。获取值非常直接，就像获取其他表单元素的值一样：
const dateInput = document.getElementById('eventDate');
const selectedDate = dateInput.value; // 得到的是一个字符串，格式如 "2023-10-26"
console.log(selectedDate);拿到这个
selectedDate字符串后，你就可以做进一步的处理了。它已经是
YYYY-MM-DD的规范格式，直接提交给后端通常没问题。但如果你需要在前端进行日期计算、格式化成其他显示样式，或者进行日期比较，那么最好把它转换成JavaScript的
Date对象。
const dateString = dateInput.value; // 例如 "2023-10-26"
if (dateString) { // 检查是否选择了日期，因为空字符串转Date会是Invalid Date
const dateObject = new Date(dateString);
console.log(dateObject); // 这是一个Date对象，可以调用各种方法
// 比如，格式化成 "2023年10月26日"
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = dateObject.toLocaleDateString('zh-CN', options);
console.log(formattedDate);
}这里有个小坑，直接
new Date("YYYY-MM-DD")在某些旧版浏览器或特定时区下可能会有些意想不到的行为（比如时区偏移）。为了更稳妥地处理，特别是当涉及到时区转换时，很多人会选择使用像moment.js或
date-fns这样的日期处理库，它们能提供更健壮和方便的日期操作API。但对于简单的获取和基本转换，原生
Date对象加上一点点处理，也足够用了。关键是，要记得你从
input.value拿到的是字符串，不是
Date对象，需要手动转换。
