Radix Vue

外观

日期范围字段 ​

Alpha
允许用户在一个指定的字段中输入日期范围。
mm
dd
yyyy
-
mm
dd
yyyy
vue
<script setup lang="ts">
import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      for="date-field"
      class="text-white"
    >Booking</Label>

    <DateRangeFieldRoot
      id="date-field"
      v-slot="{ segments }"
      :is-date-unavailable="date => date.day === 19"

      class="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.start"
        :key="item.part"
      >
        <DateRangeFieldInput
          v-if="item.part === 'literal'"
          :part="item.part"
          type="start"
        >
          {{ item.value }}
        </DateRangeFieldInput>
        <DateRangeFieldInput
          v-else
          :part="item.part"
          class="rounded-md p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
          type="start"
        >
          {{ item.value }}
        </DateRangeFieldInput>
      </template>
      <span class="mx-2">

        -
      </span>
      <template
        v-for="item in segments.end"
        :key="item.part"
      >
        <DateRangeFieldInput
          v-if="item.part === 'literal'"
          :part="item.part"
          type="end"
        >
          {{ item.value }}
        </DateRangeFieldInput>
        <DateRangeFieldInput
          v-else
          :part="item.part"
          class="rounded-md p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
          type="end"
        >
          {{ item.value }}
        </DateRangeFieldInput>
      </template>
    </DateRangeFieldRoot>
  </div>
</template>

信用

该组件在构建时借鉴了melt-ui中的实现。

功能 ​

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

前言 ​

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

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

安装 ​

安装日期包。

sh
$ npm add @internationalized/date

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

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

vue
<script setup>
import {
  DateRangeFieldInput,
  DateRangeFieldRoot,
} from 'radix-vue'
</script>

<template>
  <DateRangeFieldRoot>
    <DateRangeFieldInput />
  </DateRangeFieldRoot>
</template>

API 参考 ​

根 ​

包含日期字段的所有部分

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

此组件应该渲染成的元素或组件。 可以被asChild覆盖

asChild
布尔值

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

阅读我们的组合指南以获取更多详细信息。

defaultPlaceholder
DateValue

默认占位符日期

defaultValue
DateRange

日历的默认值

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
DateRange

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

name
字符串

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

placeholder
DateValue

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

readonly
false
布尔值

日期字段是否为只读

required
布尔值

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

发出有效载荷
update:modelValue
[DateRange]

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

update:placeholder
[date: DateValue]

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

插槽（默认）有效载荷
modelValue
DateRange
segments
{ start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }
方法类型
setFocusedElement
(el: HTMLElement) => void
数据属性价值
[data-readonly]只读时出现
[data-disabled]禁用时出现
[data-invalid]无效时出现

输入 ​

包含日期字段段

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

此组件应该渲染成的元素或组件。 可以被asChild覆盖

asChild
布尔值

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

阅读我们的组合指南以获取更多详细信息。

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

要渲染的日期部分

type*
'start' | 'end'

要渲染的字段类型（开始或结束）

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

无障碍 ​

键盘交互 ​

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