Radix Vue

外观

日期字段 ​

Alpha
允许用户在指定字段中输入特定日期。
mm
dd
yyyy
vue
<script setup lang="ts">
import { DateFieldInput, DateFieldRoot, Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      class="text-sm text-white"
      for="date-field"
    >Birthday</Label>
    <DateFieldRoot
      id="date-field"
      v-slot="{ segments }"
      :is-date-unavailable="date => date.day === 19"
      class="w-36 flex select-none bg-white items-center rounded-lg text-center text-green10 border border-transparent p-1 data-[invalid]:border-red-500"
    >
      <template
        v-for="item in segments"
        :key="item.part"
      >
        <DateFieldInput
          v-if="item.part === 'literal'"
          :part="item.part"
        >
          {{ item.value }}
        </DateFieldInput>
        <DateFieldInput
          v-else
          :part="item.part"
          class="rounded p-0.5   focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
        >
          {{ item.value }}
        </DateFieldInput>
      </template>
    </DateFieldRoot>
  </div>
</template>

信用

此组件的构建灵感来自melt-ui中的实现。

功能 ​

  • 完整的键盘导航
  • 可以是受控的或不受控的
  • 焦点完全管理
  • 本地化支持
  • 高度可组合
  • 默认情况下可访问
  • 支持日期和日期时间格式

前言 ​

该组件依赖于@internationalized/date包，它解决了在 JavaScript 中处理日期和时间时遇到的许多问题。

我们强烈建议您阅读该包的文档以全面了解其工作原理，您需要在项目中安装它才能使用与日期相关的组件。

安装 ​

安装日期包。

sh
$ npm add @internationalized/date

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入所有部分并将它们拼凑在一起。

vue
<script setup>
import {
  DateFieldInput,
  DateFieldRoot,
} from 'radix-vue'
</script>

<template>
  <DateFieldRoot>
    <DateFieldInput />
  </DateFieldRoot>
</template>

API 参考 ​

根 ​

包含日期字段的所有部分

道具默认类型
as
'div'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改传递为子级的默认呈现元素，合并其属性和行为。

阅读我们的组合指南了解更多详细信息。

defaultPlaceholder
DateValue

默认占位符日期

defaultValue
DateValue

日历的默认值

dir
'ltr' | 'rtl'

日期字段的阅读方向（适用时）。
如果省略，则从 ConfigProvider 全局继承或假设 LTR（从左到右）阅读模式。

disabled
false
布尔值

日期字段是否被禁用

granularity
'day' | 'hour' | 'minute' | 'second'

用于格式化时间的粒度。如果提供 CalendarDate，则默认为 day，否则默认为 minute。该字段将为日期的每个部分呈现段，直到并包括指定的粒度

hideTimeZone
布尔值

是否隐藏字段的时区段

hourCycle
12 | 24

用于格式化时间的时钟周期。默认为本地首选项

id
字符串

元素的 ID

isDateUnavailable
匹配器

一个函数，返回日期是否不可用

locale
'en'
字符串

用于格式化日期的区域设置

maxValue
DateValue

可以选择的最大日期

minValue
DateValue

可以选择的最早日期

modelValue
DateValue

日历的受控选中状态。可以绑定为 v-model。

name
字符串

日期字段的名称。作为名称/值对的一部分，与所属表单一起提交。

placeholder
DateValue

占位符日期，用于确定在未选择日期时显示哪个月。这会在用户浏览日历时更新，并可用于以编程方式控制日历视图

readonly
false
布尔值

日期字段是否为只读

required
布尔值

当 true 时，表示用户必须在所属表单提交之前检查日期字段。

发射有效载荷
update:modelValue
[date: DateValue]

每当模型值更改时都会调用的事件处理程序

update:placeholder
[date: DateValue]

每当占位符值更改时都会调用的事件处理程序

插槽（默认）有效载荷
modelValue
DateValue | undefined

字段的当前日期

segments
{ part: SegmentPart; value: string; }[]

日期字段段内容

isInvalid
布尔值

如果输入无效的值

方法类型
setFocusedElement
(el: HTMLElement) => void

帮助程序，用于在 DateField 中设置聚焦元素

数据属性价值
[data-readonly]只读时出现
[data-disabled]禁用时出现
[data-invalid]无效时出现

输入 ​

包含日期字段段

道具默认类型
as
'div'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改传递为子级的默认呈现元素，合并其属性和行为。

阅读我们的组合指南了解更多详细信息。

part*
'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName'

要渲染的日期部分

数据属性价值
[data-disabled]禁用时出现
[data-invalid]无效时出现
[data-placeholder]未设置值时出现

无障碍 ​

键盘交互 ​

关键描述
Tab
当焦点移动到日期字段时，会聚焦第一个段。
ArrowLeftArrowRight
在日期字段段之间导航。
ArrowUpArrowDown
增加/更改段的值。
0-9
当焦点位于数字 DateFieldInput 上时，它会输入数字，如果下一个输入会导致无效值，则会聚焦下一个段。
退格键
从聚焦的数字段中删除一个数字。
AP
当焦点位于时段上时，它会将其设置为 AM 或 PM。