Lzh on GitHub

Date Range Field

允许用户在指定字段内输入一系列日期。
<script setup lang="ts">
import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'reka-ui'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      for="booking"
      class="text-stone-700 dark:text-white"
    >
      Booking
    </Label>

    <DateRangeFieldRoot
      id="booking"
      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 shadow-sm 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 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 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>

功能特性 (Features)

  • 完整的键盘导航。
  • 可控或非控。
  • 焦点完全管理。
  • 支持本地化。
  • 默认可访问。
  • 支持日期和日期时间格式。

前言 (Preface)

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

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

安装

安装日期包 (Install the date package)

$ npm add @internationalized/date

安装组件 (Install the component)

$ npm add reka-ui

结构 (Anatomy)

导入所有部件并组装它们。

<script setup>
import {
  DateRangeFieldInput,
  DateRangeFieldRoot,
} from 'reka-ui'
</script>

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

API 参考 (API Reference)

根 (Root)

包含日期字段的所有部分。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
defaultPlaceholderDateValue默认占位符日期。
defaultValueDateRange日历的默认值。
dir'ltr' | 'rtl'日期字段的阅读方向（如果适用）。如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。
disabledfalseboolean日期字段是否禁用。
granularity'day' | 'hour' | 'minute' | 'second'用于格式化时间的粒度。如果提供了 CalendarDate，则默认为天，否则默认为分钟。字段将渲染日期各部分的片段，直至并包括指定的粒度。
hideTimeZoneboolean是否隐藏字段的时区片段。
hourCycle12 | 24用于格式化时间的小时制。默认为本地偏好设置。
idstring元素的 ID。
isDateUnavailableMatcher返回日期是否不可用的函数。
localestring用于格式化日期的区域设置。
maxValueDateValue可选择的最大日期。
minValueDateValue可选择的最小日期。
modelValueDateRange | null日历的受控选中状态。可绑定为 v-model。
namestring字段的名称。作为名称/值对的一部分随其所属的表单一起提交。
placeholderDateValue占位符日期，用于在未选择日期时确定要显示的月份。它会随着用户导航日历而更新，可用于编程控制日历视图。
readonlyfalseboolean日期字段是否只读。
requiredboolean当 true 时，表示用户必须在提交所属表单之前设置值。
stepDateStep时间字段的步进间隔。默认为 1。

发送事件

事件Payload描述
update:modelValue[DateRange]modelValue 更改时调用的事件处理程序。
update:placeholder[date: DateValue]placeholder 值更改时调用的事件处理程序。

默认插槽

插槽参数插槽参数类型描述
modelValueDateRange | null当前日期范围。
segments{ start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }日期字段片段内容。

方法 (Methods)

方法名称类型描述
isDateUnavailableMatcher返回日期是否不可用的函数。
setFocusedElement(el: HTMLElement) => void设置 DateField 内部聚焦元素的辅助函数。

数据属性 (Data Attribute)

值描述
[data-readonly]只读时存在
[data-disabled]禁用时存在
[data-invalid]无效时存在

输入 (Input)

包含日期字段片段。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
part*'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'literal' | 'timeZoneName'要渲染的日期部分。
type*'start' | 'end'要渲染的字段类型（开始或结束）。

数据属性 (Data Attribute)

值描述
[data-disabled]禁用时存在
[data-invalid]无效时存在
[data-placeholder]未设置值时存在

可访问性 (Accessibility)

键盘交互 (Keyboard Interactions)

按键描述
Tab当焦点移动到日期字段时，聚焦第一个片段。
ArrowLeft ArrowRight在日期字段片段之间导航。
ArrowUp ArrowDown增加/更改片段的值。
0-9当焦点位于数字 DateFieldInput 上时，输入数字并聚焦下一个片段，如果下一个输入会导致无效值。
Backspace从聚焦的数字片段中删除一位数字。
A P当焦点位于日期间隔（上午/下午）时，将其设置为 AM 或 PM。