100 lines
4.0 KiB
JSON
100 lines
4.0 KiB
JSON
{
|
||
"slug": "datepicker",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生日期选择：直接消费 <input type=\"date\"> 的系统日历，旁边按钮只是样式，无脚本。",
|
||
"usage": [
|
||
"控件是原生 <input type=\"date\">（类名 .kole-datepicker-control），日历面板由浏览器提供，组件不实现弹层。",
|
||
"label 用 .kole-datepicker-item 包住文字与输入框，点文字即聚焦输入框，这是原生 label 行为而非 for/id 关联。",
|
||
"「本月」按钮是 .kole-datepicker-button 加 .kole-datepicker-secondary，整页无脚本，点了没有反应。",
|
||
"初值靠原生 value 属性写在 HTML 里（示例 value=\"2026-09-20\"），不是脚本注入。"
|
||
],
|
||
"bestPractices": [
|
||
"示例按钮没有任何脚本绑定，要做「本月」跳转必须自己写 click 并回写 input.value。",
|
||
"type=\"date\" 的显示格式随浏览器语言变化，要固定展示格式得自己格式化后再渲染。",
|
||
"示例同时用了 label 包裹与 aria-label=\"日期\"，接自己代码时保留一处即可，两处都写会重复播报。"
|
||
],
|
||
"a11y": [
|
||
"原生 <input type=\"date\"> 的键盘与读屏支持由浏览器提供，这是本端最省事的无障碍来源。",
|
||
"label 包裹与 aria-label=\"日期\" 重复声明，读屏会读两遍。",
|
||
"「本月」按钮文字可读，但它没有绑定行为，焦点可达却无响应。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端直接消费原生控件：.kole-datepicker-control 就是 <input type=\"date\">，.kole-datepicker-item 是 label 包裹，.kole-datepicker-button 与 -secondary 只提供按钮样式。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:5）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker-button",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker-control",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker-item",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker-secondary",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-datepicker-surface",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/DatePicker.html:6）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DatePicker.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/DatePicker.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"datepicker-ex-1",
|
||
"datepicker-ex-2"
|
||
],
|
||
"notes": [
|
||
"原生输入与 label 包裹见（frameworks/DatePicker.html:6）。",
|
||
"脚本区为空见（frameworks/DatePicker.html:6）的 <script> 标签对。",
|
||
"样式依据：.kole-datepicker-control 在 frameworks/DatePicker.css:9 与 frameworks/DatePicker.css:16、.kole-datepicker-button 在 frameworks/DatePicker.css:15。"
|
||
]
|
||
}
|