日期输入 Date Input

#基础用法

Publication date

mmddyyyy

date-input/basic.vue

<script setup lang="ts">
import { DateInput } from "@bysages/vue";
</script>

<template>
  <DateInput.Root>
    <DateInput.Label>Publication date</DateInput.Label>
    <DateInput.Control>
      <DateInput.SegmentGroup>
        <DateInput.SegmentContext v-slot="segmentProps">
          <DateInput.Segment :segment="segmentProps" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	分段字段高度，可为 `sm`、`md` 或 `lg`
`allSegments`	`dateInput.Props['allSegments']`		是否根据粒度包含所有日期和时间分段
`defaultPlaceholderValue`	`dateInput.Props['defaultPlaceholderValue']`		初始占位日期值
`defaultValue`	`dateInput.DateValue[]`		初始选中日期；无需控制选中日期时使用
`disabled`	`boolean`		日期输入框是否禁用
`form`	`string`		隐藏 input 关联的表单
`format`	`dateInput.Props['format']`		输入框中显示的日期格式
`formatter`	`dateInput.Props['formatter']`		格式化日期分段的函数
`granularity`	`dateInput.Props['granularity']`		日期输入框的粒度
`hideTimeZone`	`boolean`	`false`	值为 `ZonedDateTime` 时是否隐藏时区分段
`hourCycle`	`dateInput.Props['hourCycle']`		格式化时间分段的小时制
`id`	`string`		组件内部状态机的唯一标识
`ids`	`dateInput.Props['ids']`		日期输入框内各元素的 id；便于组合使用
`invalid`	`boolean`		日期输入框是否无效
`locale`	`string`	`"en-US"`	格式化日期时使用的区域设置（BCP 47 语言标签）
`max`	`dateInput.DateValue`		可选的最大日期
`min`	`dateInput.DateValue`		可选的最小日期
`modelValue`	`dateInput.DateValue[]`		日期输入框的 v-model 值
`name`	`string`		隐藏 input 的 `name` 属性
`placeholderValue`	`dateInput.Props['placeholderValue']`		用于生成占位分段的占位日期
`readOnly`	`boolean`		日期输入框是否只读
`required`	`boolean`		日期输入框是否必填
`selectionMode`	`dateInput.SelectionMode`	`"single"`	日期输入框的选择模式：`single` 表示只能选择一个日期；`range` 表示可以选择日期范围
`shouldForceLeadingZeros`	`boolean`		数字分段是否补前导零
`timeZone`	`string`	`"UTC"`	使用的时区
`translations`	`dateInput.Props['translations']`		本地化文案
`value`	`dateInput.DateValue[]`		受控的选中日期

#SegmentContext

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#SegmentGroup

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Segment

纯造型的部件——自身没有属性，沿用部件结构的共享样式。