日期时间选择

左边日历、右边时间列的组合面板，一次选定日期和时间，点「确定」提交。窄屏上下排列。

带行为分包 modular/date 1 个事件 2 个方法

示例

代码

<div data-zh-datetime data-name="when" data-value="2026-10-15 09:30" data-min="2026-10-05" data-msg="#whenMsg" aria-label="预约时间"></div>
<div id="whenMsg" aria-live="polite"></div>

<script>
document.querySelector('[data-zh-datetime]').addEventListener('zh:datetime-change', function (e) {
  console.log(e.detail.value);
});
</script>

只用核心包（modular/core）时，还要加 modular/date.min.js 和 modular/date.min.css；全量版已包含。见按需引入。

属性

属性	用在	取值	说明
`data-zh-datetime`	<div>	无	声明这是日期时间选择
`data-value`	容器	YYYY-MM-DD HH:mm	初始值
`data-min / data-max`	容器	YYYY-MM-DD	可选日期范围
`data-disable-weekends / data-disabled-dates`	容器	布尔属性 / 逗号分隔日期	禁用周末 / 指定日期
`data-name`	容器	字段名	生成隐藏 <input name=…> 参与表单提交
`data-size`	容器	sm \| md（默认）\| lg	尺寸
`aria-label / data-labelledby / data-label`	容器	字符串 / 标签元素 id / 弹层标题	输入框的无障碍名称；data-label 是弹出面板的标题
`data-msg`	容器	一个元素的选择器，如 #status	可选的状态提示元素：选择、报错时会把文字写进去（读屏可以朗读），元素上可预先写好默认文字
`<label for="容器 id">`	容器所在页面的 <label>	for 指向容器的 id	label 会成为输入框的无障碍名称，点击 label 会聚焦输入框；容器是空 <div>，label 的 for 指向它的 id 即可

事件

事件	触发于	detail	说明
`zh:datetime-change`	容器	{ value: 'YYYY-MM-DD HH:mm' \| '', date, time }	日期或时间变化、键入确认、清除后触发（冒泡）；面板里选日期或调时间时输入框会实时更新，也会触发

方法

ZhaoUI.dateTimePicker(host, { value: { date, time }, min, max, disabledDate, size, msg, onChange })：命令式创建；也接受 'YYYY-MM-DD HH:mm' 字符串作为 value；onChange({ date, time } | null)
el.zhDateTime.get() / .set(value) / .open() / .close()：get 返回 { date, time } 或 null；set 接受对象或字符串，不触发事件

样式类

zh-dp　zh-dp-panel　zh-dp-side

日历与时间列的键盘操作同单独的日期、时间选择
底部显示当前选中的「2026-10-15 09:30」，还没选日期时提示「请先选择日期」
键入格式为 YYYY-MM-DD HH:mm，不合法或不可选时标记 aria-invalid 并写入 data-msg 元素

常见问题

日期时间选择是什么？

左边日历、右边时间列的组合面板，一次选定日期和时间，点「确定」提交。窄屏上下排列。

怎么使用日期时间选择？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

日期时间选择有哪些事件？

zh:datetime-change（日期或时间变化、键入确认、清除后触发（冒泡）；面板里选日期或调时间时输入框会实时更新，也会触发）。

日期时间选择有哪些方法？

ZhaoUI.dateTimePicker(host, { value: { date, time }, min, max, disabledDate, size, msg, onChange })：命令式创建；也接受 'YYYY-MM-DD HH:mm' 字符串作为 value；onChange({ date, time } | null)；el.zhDateTime.get() / .set(value) / .open() / .close()：get 返回 { date, time } 或 null；set 接受对象或字符串，不触发事件。

日期时间选择支持键盘和读屏吗？

日历与时间列的键盘操作同单独的日期、时间选择；底部显示当前选中的「2026-10-15 09:30」，还没选日期时提示「请先选择日期」；键入格式为 YYYY-MM-DD HH:mm，不合法或不可选时标记 aria-invalid 并写入 data-msg 元素。

日期时间选择需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。