日期输入框
@astryxdesign/core v0.7.1 · DateInput
使用方法
DateInput 是一个日期输入组件，结合了文本输入框和日历弹出层。用户可以手动输入日期文本，也可以点击打开日历选择。
基本用法只需要绑定一个日期值：
vue
<script setup lang="ts">
import { DateInput } from '@astryx-vue/core/DateInput'
import { ref } from 'vue'
const date = ref(null)
</script>
<template>
<DateInput v-model="date" placeholder="选择日期" />
</template>绑定值是本地日期。写回字段时默认排成完整日期，例如 March 21, 2026。也可以改成短日期、带星期、系统日期，或自己排版。标签下面可以放说明。校验可以只改边框，也可以在字段下面写出原因。
日历可以从弹出层或底部面板打开。底部面板一次显示一个月，点一天就写入，保存才收起；点月份标题可以改月份和年份。系统日期控件可以一直用，也可以只在触摸设备上用。不指定时，鼠标走弹出层，触摸走系统控件。字段正在保存时不能改，保存会在新值写进去之后进行。标签可以带一条提示，并标明选填或必填。弹出的月历可以一次看两个月，一周从哪一天开始也能指定。
解剖
| 部分 | 说明 |
|---|---|
| 标签 | 输入框上方的文字，说明期望的是什么日期。 |
| 文本输入 | 可以直接打日期的字段。能解析 MM/DD/YYYY 这类常见格式。 |
| 日历图标 | 打开日历浮层，看着日历选日期的按钮。 |
| 日历浮层 | 点击图标或输入框聚焦时出现的月份网格。 |
| 清除按钮 | 把日期清掉的 × 按钮。clearable 打开且已经有日期时显示。 |
| 状态消息 | 输入框下面的错误、警告或成功提示。 |
最佳实践
| 指引 | 实践 |
|---|---|
| 推荐 | 为非必填的日期字段提供清除功能。 |
| 推荐 | 设置合理的日期范围限制，防止用户选择无效日期。 |
| 推荐 | 使用清晰的占位符提示日期格式。 |
| 避免 | 在需要精确到时分秒的场景使用日期输入框。 |
示例
可清除
Selected: 2026-04-06
Pick a date for your event
可选的活动日期，带清除按钮。字段上方显示当前选中的值。
说明文字
Helper text explains what the field expects
Your subscription begins on this date
标签下方的说明用来交代这个日期的用途。
显示格式
The same committed date, displayed with different formats.
同一天可以显示为短月份、长月份、带星期、ISO 日期，或自定义文案。
最小和最大
Pick a date in the available range
Available dates: Oct 8 – 21, 2026
只能选择本月 8 日到 21 日。粗指针设备会在底部面板里打开日历。
校验状态
This date is already booked
This date falls on a holiday
Date confirmed
错误、警告和成功，各自带一条说明。
保存与标签
Saved when the date changes.
日期先写进字段，保存结束前不能再改。周末不可选。另一个字段标明选填。
系统日期
This field opens the browser date control.
直接使用系统日期控件，字段上仍按完整日期显示。
底部面板
Opens a one-month sheet. Save closes it.
不论鼠标还是触屏，都从底部面板选日期。点一天就写入，保存才收起。