原生 不够用因其不支持范围选择、中文显示、禁用规则、主题定制及周起始日调整，且跨浏览器渲染差异大；需用 web components 封装，重点处理 observedattributes、attributechangedcallback 渲染隔离、connectedcallback 事件初始化，并确保 value 双向同步与表单集成。
为什么原生 <input type="date"> 不够用
它不支持范围选择、中文星期/月份显示、禁用日期规则、自定义主题，连周起始日都固定为周日。更麻烦的是，不同浏览器渲染差异大，iOS 上点开会直接调系统日历，完全没法干预样式和交互逻辑。
所以得自己封装——但不是从零写日历网格，而是用 Web Components 套一层可控壳，把日期逻辑和 DOM 生命周期绑死。
用 customElements.define() 注册组件时必须处理的三件事
第一，observedAttributes 要显式声明哪些 HTML 属性会触发更新，比如 min、max、disabled-dates；第二，attributeChangedCallback 里不能直接操作 shadow DOM，得用 this._render() 统一刷新；第三，必须在 connectedCallback 里初始化事件监听，否则首次插入页面时点击无效。
常见错误是把日期格式化逻辑写在 render() 里反复执行，导致性能掉帧。正确做法是缓存 Intl.DateTimeFormat 实例，只在 locale 或时区变化时重建：
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric', month: '2-digit', day: '2-digit'
});
disabled-dates 属性怎么传才真正生效
这个属性值必须是 JSON 字符串（不是对象），因为 HTML 属性只能是字符串。用户常误写成：<date-picker disabled-dates="{" before></date-picker>，结果解析失败——缺少外层引号或转义错误。
推荐接收方式：
- 在
attributeChangedCallback中用JSON.parse(value)解析，捕获SyntaxError并降级为全启用 - 支持三种禁用模式：
before（早于某日）、after（晚于某日）、list（指定日期数组，如["2024-05-01", "2024-05-03"]） - 判断是否禁用某日时，用
new Date(dateStr).toDateString() === targetDate.toDateString()，避免时区偏移导致误判
如何让 value 双向同步且兼容表单提交
不能只靠 setAttribute('value', ...)，得同时实现 formAssociated = true 并注册 ElementInternals。否则：表单 reset() 不重置、checkValidity() 返回 false、外部 JS 读 el.value 拿不到最新值。
关键步骤：
- 构造函数里调用
this.internals = this.attachInternals() - 每次用户选中日期后，调用
this.internals.setFormValue(dateString) - 重写
get value()和set value(val)，内部用this.internals.formValue同步 - 监听
change事件并 dispatch 自定义input和change，保持与原生行为一致
最易忽略的是：如果组件被放进 <form></form> 但没设 name 属性，submit 时根本不会提交该字段值——这点和原生 input 完全一样，但新手常以为自定义元素能绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
