使用方法

DateTimeInput 把日期和时间放在一起。值是 YYYY-MM-DDTHH:MM。两部分都有了才会写出这个值，否则是 null。

<script setup lang="ts">
import { DateTimeInput } from '@astryx-vue/core/DateTimeInput'
import { shallowRef } from 'vue'

const meeting = shallowRef<string | null>(null)
</script>

<template>
  <DateTimeInput v-model="meeting" label="会议时间" has-clear />
</template>

日期用日期输入框，时间用和时间输入框相同的字段。两个字段默认左右并排，并随行宽一起变窄。行宽小于 16rem 时才换行。bottom-sheet 时日期和时间共用一个底部面板，顶上在日期和时间之间切换。清除会同时清掉日期和时间。日期那一半可以一次显示两个月，并指定一周从哪一天开始。正在保存时两个字段都不能改。

解剖

部分	说明
标签	输入框上方的文字，说明期望的是什么日期时间。
分段行	不带边框的布局行，装着两段带边框的输入。容器变窄时会换行。
日期输入	精细指针下是带日历浮层的 Astryx 日期字段；原生模式是真正的 input type=date；presentation 为 adaptive-bottom-sheet 且指针较粗时，是只读分段，打开 Astryx 触摸面板。
日历图标	打开当前日期表面的按钮：平台选择器、Astryx 日历浮层，或 Astryx 触摸面板。
日期选择器	原生模式用浏览器或系统选择器；精细指针用 Astryx 的月份网格浮层；presentation 为 adaptive-bottom-sheet 且指针较粗时，用 Astryx 底部面板里的日期页。
时间输入	默认的分钟精度原生模式是真正的 input type=time；需要秒、自定义步进或预设选项时，是文本或组合框时间字段；presentation 为 adaptive-bottom-sheet 且指针较粗时，是只读分段，打开可访问的时间滚轮。
时钟图标	时间符号。在 Astryx 的指针字段上作为前导标识，在原生模式和触摸面板的时间分段上作为打开选择器的操作。
时间选项浮层	按 timeOptionInterval 的间隔列出预设时间。设置这个属性后，即使 nativePicker 本来会选原生控件，也会保留 Astryx 的文本或组合框时间字段；Astryx 触摸面板则改用滚轮。
时间选项	可选时间选项浮层里的一个预设时间。
清除按钮	把日期时间清掉的 × 按钮。
状态消息	输入框下面的错误、警告或成功提示。

最佳实践

指引	实践
推荐	时间可选时打开 hasClear。
避免	只需要日期时使用它。DateInput 更合适。

示例

校验

Meeting time

日期

This time slot is already booked

Preferred time

日期

This falls outside business hours

Start time

日期

Time confirmed

已填好的日期时间上的错误、警告和成功。

底部面板

Meeting

周日

周一

周二

周三

周四

周五

周六

一个底部面板里切换日期和时间。