Radix Vue

外观

日期范围选择器 ​

Alpha
通过输入和基于日历的界面来选择日期范围。
mm
dd
yyyy
-
mm
dd
yyyy
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  DateRangePickerArrow,
  DateRangePickerCalendar,
  DateRangePickerCell,
  DateRangePickerCellTrigger,
  DateRangePickerContent,
  DateRangePickerField,
  DateRangePickerGrid,
  DateRangePickerGridBody,
  DateRangePickerGridHead,
  DateRangePickerGridRow,
  DateRangePickerHeadCell,
  DateRangePickerHeader,
  DateRangePickerHeading,
  DateRangePickerInput,
  DateRangePickerNext,
  DateRangePickerPrev,
  DateRangePickerRoot,
  DateRangePickerTrigger,
  Label,
} from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      class="text-sm text-gray9"
      for="date-field"
    >Birthday</Label>
    <DateRangePickerRoot
      id="date-field"
      :is-date-unavailable="date => date.day === 19"
    >
      <DateRangePickerField
        v-slot="{ segments }"
        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"
        >
          <DateRangePickerInput
            v-if="item.part === 'literal'"
            :part="item.part"
            type="start"
          >
            {{ item.value }}
          </DateRangePickerInput>
          <DateRangePickerInput
            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 }}
          </DateRangePickerInput>
        </template>
        <span class="mx-2">

          -
        </span>
        <template
          v-for="item in segments.end"
          :key="item.part"
        >
          <DateRangePickerInput
            v-if="item.part === 'literal'"
            :part="item.part"
            type="end"
          >
            {{ item.value }}
          </DateRangePickerInput>
          <DateRangePickerInput
            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 }}
          </DateRangePickerInput>
        </template>

        <DateRangePickerTrigger class="ml-4 focus:shadow-[0_0_0_2px] focus:shadow-black">
          <Icon
            icon="radix-icons:calendar"
            class="w-6 h-6"
          />
        </DateRangePickerTrigger>
      </DateRangePickerField>

      <DateRangePickerContent
        :side-offset="4"
        class="rounded-xl bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
      >
        <DateRangePickerArrow class="fill-white" />
        <DateRangePickerCalendar
          v-slot="{ weekDays, grid }"
          class="p-4"
        >
          <DateRangePickerHeader class="flex items-center justify-between">
            <DateRangePickerPrev
              class="inline-flex items-center cursor-pointer text-black justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
            >
              <Icon
                icon="radix-icons:chevron-left"
                class="w-6 h-6"
              />
            </DateRangePickerPrev>

            <DateRangePickerHeading class="text-[15px] text-black font-medium" />
            <DateRangePickerNext
              class="inline-flex items-center cursor-pointer text-black justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
            >
              <Icon
                icon="radix-icons:chevron-right"
                class="w-6 h-6"
              />
            </DateRangePickerNext>
          </DateRangePickerHeader>
          <div
            class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
          >
            <DateRangePickerGrid
              v-for="month in grid"
              :key="month.value.toString()"
              class="w-full border-collapse select-none space-y-1"
            >
              <DateRangePickerGridHead>
                <DateRangePickerGridRow class="mb-1 flex w-full justify-between">
                  <DateRangePickerHeadCell
                    v-for="day in weekDays"
                    :key="day"
                    class="w-8 rounded-md text-xs !font-normal text-black"
                  >
                    {{ day }}
                  </DateRangePickerHeadCell>
                </DateRangePickerGridRow>
              </DateRangePickerGridHead>
              <DateRangePickerGridBody>
                <DateRangePickerGridRow
                  v-for="(weekDates, index) in month.rows"
                  :key="`weekDate-${index}`"
                  class="flex w-full"
                >
                  <DateRangePickerCell
                    v-for="weekDate in weekDates"
                    :key="weekDate.toString()"
                    :date="weekDate"
                  >
                    <DateRangePickerCellTrigger
                      :day="weekDate"
                      :month="month.value"
                      class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
                    />
                  </DateRangePickerCell>
                </DateRangePickerGridRow>
              </DateRangePickerGridBody>
            </DateRangePickerGrid>
          </div>
        </DateRangePickerCalendar>
      </DateRangePickerContent>
    </DateRangePickerRoot>
  </div>
</template>

信用

此组件的构建参考了 melt-ui 中的实现。

特点 ​

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

前言 ​

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

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

安装 ​

安装日期包。

sh
$ npm add @internationalized/date

从您的命令行安装组件。

sh
$ npm add radix-vue

解剖学 ​

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

vue
<script setup>
import {
  DateRangePickerAnchor,
  DateRangePickerArrow,
  DateRangePickerCalendar,
  DateRangePickerCell,
  DateRangePickerCellTrigger,
  DateRangePickerClose,
  DateRangePickerContent,
  DateRangePickerField,
  DateRangePickerGrid,
  DateRangePickerGridBody,
  DateRangePickerGridHead,
  DateRangePickerGridRow,
  DateRangePickerHeadCell,
  DateRangePickerHeader,
  DateRangePickerHeading,
  DateRangePickerInput,
  DateRangePickerNext,
  DateRangePickerPrev,
  DateRangePickerRoot,
  DateRangePickerTrigger,
} from 'radix-vue'
</script>

<template>
  <DateRangePickerRoot>
    <DateRangePickerField>
      <DateRangePickerInput />
      <DateRangePickerTrigger />
    </DateRangePickerField>

    <DateRangePickerAnchor />

    <DateRangePickerContent>
      <DateRangePickerClose />
      <DateRangePickerArrow />

      <DateRangePickerCalendar>
        <DateRangePickerHeader>
          <DateRangePickerPrev />
          <DateRangePickerHeading />
          <DateRangePickerNext />
        </DateRangePickerHeader>

        <DateRangePickerGrid>
          <DateRangePickerGridHead>
            <DateRangePickerGridRow>
              <DateRangePickerHeadCell />
            </DateRangePickerGridRow>
          </DateRangePickerGridHead>

          <DateRangePickerGridBody>
            <DateRangePickerGridRow>
              <DateRangePickerCell>
                <DateRangePickerCellTrigger />
              </DateRangePickerCell>
            </DateRangePickerGridRow>
          </DateRangePickerGridBody>
        </DateRangePickerGrid>
      </DateRangePickerCalendar>
    </DateRangePickerContent>
  </DateRangePickerRoot>
</template>

API 参考 ​

根 ​

包含日期选择器的所有部分

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

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

asChild
布尔值

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

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

defaultOpen
false
布尔值

弹出窗口在初始渲染时的打开状态。当您不需要控制其打开状态时使用。

defaultPlaceholder
DateValue

默认占位符日期

defaultValue
{ start: undefined, end: undefined }
DateRange

日历的默认值

dir
'ltr' | 'rtl'

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

disabled
false
布尔值

日期字段是否被禁用

fixedWeeks
false
布尔值

是否始终在日历中显示 6 周

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

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

hideTimeZone
布尔值

是否隐藏字段的时区段

hourCycle
12 | 24

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

id
字符串

元素的 ID

isDateDisabled
Matcher

返回日期是否禁用的函数

isDateUnavailable
Matcher

返回日期是否不可用的函数

locale
'en'
字符串

用于格式化日期的语言环境

maxValue
DateValue

可以选择的最大日期

minValue
DateValue

可以选择的最早日期

modal
false
布尔值

弹出窗口的模态性。设置为 true 时，将禁用与外部元素的交互，并且只有弹出窗口内容对屏幕阅读器可见。

modelValue
DateRange

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

name
字符串

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

numberOfMonths
1
数字

一次显示的月份数

open
布尔值

弹出窗口的受控打开状态。

pagedNavigation
false
布尔值

此属性会导致上一个和下一个按钮按一次显示的月份数导航，而不是一个月

placeholder
DateValue

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

preventDeselect
false
布尔值

是否阻止用户在不先选择另一个日期的情况下取消选择日期

readonly
false
布尔值

日期字段是否为只读

required
布尔值

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

weekdayFormat
'narrow'
'narrow' | 'short' | 'long'

用于通过 weekdays 插槽道具提供的星期几字符串的格式

weekStartsOn
0
0 | 1 | 2 | 3 | 4 | 5 | 6

日历开始的星期几

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

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

update:open
[value: boolean]

子菜单打开状态发生变化时调用的事件处理程序。

update:placeholder
[date: DateValue]

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

update:startValue
[date: DateValue]

每当开始值更改时调用的事件处理程序

字段 ​

包含日期选择器日期字段段和触发器

插槽（默认）有效载荷
segments
{ start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }
modelValue
DateRange
数据属性值
[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]未设置值时存在

触发器 ​

切换弹出窗口的按钮。默认情况下，DateRangePickerContent 将自身定位在触发器上。

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

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

asChild
布尔值

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

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

内容 ​

弹出窗口打开时弹出该组件。

道具默认类型
align
'start' | 'center' | 'end'

相对于触发器的首选对齐方式。当发生碰撞时可能会改变。

alignOffset
数字

来自 start 或 end 对齐选项的像素偏移。

arrowPadding
数字

箭头与内容边缘之间的填充。如果您的内容有边框半径，这将防止它溢出角落。

as
'div'
AsTag | 组件

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

asChild
布尔值

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

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

avoidCollisions
布尔值

设置为 true 时，将覆盖侧面和对齐首选项以防止与边界边缘发生碰撞。

collisionBoundary
元素 | (元素 | 空)[] | 空

用作碰撞边界的元素。默认情况下，这是视窗，但您可以提供要包含在此检查中的其他元素。

collisionPadding
数字 | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>

从边界边缘到应发生碰撞检测的距离（以像素为单位）。接受一个数字（所有边都相同），或一个部分填充对象，例如：{ top: 20, left: 20 }。

disableOutsidePointerEvents
布尔值

设置为 true 时，将禁用 DismissableLayer 外部元素的悬停/焦点/点击交互。用户需要在外部元素上点击两次才能与它们进行交互：第一次关闭 DismissableLayer，第二次触发该元素。

forceMount
布尔值

用于在需要更多控制时强制安装。当使用 Vue 动画库控制动画时很有用。

hideWhenDetached
布尔值

当触发器完全被遮挡时是否隐藏内容。

prioritizePosition
布尔值

强制内容位于视窗内。

可能与参考元素重叠，这可能不是您想要的。

边
'top' | 'right' | 'bottom' | 'left'

触发器打开时渲染的优选侧边。当发生碰撞且 avoidCollisions 启用时，将反转。

侧边偏移
数字

距离触发器的像素距离。

粘性
'partial' | 'always'

对齐轴上的粘性行为。partial 将使内容保持在边界内，只要触发器至少部分在边界内，而 "always" 将始终使内容保持在边界内。

捕获焦点
布尔值

是否应该在 MenuContent 内捕获焦点

更新位置策略
'always' | 'optimized'

在每个动画帧上更新浮动元素位置的策略。

发出有效载荷
关闭自动聚焦
[事件：事件]

关闭时自动聚焦时调用的事件处理程序。可以阻止。

退出键按下
[事件：键盘事件]

按下退出键时调用的事件处理程序。可以阻止。

焦点移出
[事件：焦点移出事件]

焦点移出 DismissableLayer 时调用的事件处理程序。可以阻止。

交互移出
[事件：指针按下移出事件 | 焦点移出事件]

在 DismissableLayer 外部发生交互时调用的事件处理程序。具体来说，当 pointerdown 事件发生在外部或焦点移出它时。可以阻止。

打开自动聚焦
[事件：事件]

打开时自动聚焦时调用的事件处理程序。可以阻止。

指针按下移出
[事件：指针按下移出事件]

当 pointerdown 事件发生在 DismissableLayer 外部时调用的事件处理程序。可以阻止。

箭头 ​

一个可选的箭头元素，与弹出窗口一起渲染。这可以用来帮助视觉上将锚点与 PopoverContent 链接起来。必须在 PopoverContent 内渲染。

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

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

asChild
布尔值

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

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

高度
数字

箭头的像素高度。

宽度
数字

箭头的像素宽度。

箭头 ​

一个可选的箭头元素，与弹出窗口一起渲染。这可以用来帮助视觉上将锚点与 DateRangePickerContent 链接起来。必须在 DateRangePickerContent 内渲染。

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

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

asChild
布尔值

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

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

高度
数字

箭头的像素高度。

宽度
数字

箭头的像素宽度。

关闭 ​

关闭打开的日期选择器的按钮。

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

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

asChild
布尔值

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

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

锚点 ​

一个可选的元素，用于将 DateRangePickerContent 定位到它上面。如果此部分未使用，内容将与 DateRangePickerTrigger 并排定位。

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

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

asChild
布尔值

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

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

元素
可测量

日历 ​

包含日历的所有部分。

插槽（默认）有效载荷
日期
DateValue
网格
Grid<DateValue>[]
星期
string[]
weekStartsOn
0 | 1 | 2 | 3 | 4 | 5 | 6
locale
字符串
fixedWeeks
布尔值
数据属性值
[data-readonly]只读时存在
[data-disabled]禁用时存在
[data-invalid]无效时存在

包含导航按钮和标题部分。

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

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

asChild
布尔值

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

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

上一步按钮 ​

日历导航按钮。根据当前日历视图，它将日历向前导航一个月/一年/十年。

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

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

asChild
布尔值

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

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

上一步
(((占位符：DateValue) => DateValue)

用于上一步的函数。覆盖 RangeCalendarRoot 上设置的 prevPage 函数。

步骤
'month' | 'year'

向前移动的日历单位。

数据属性值
[data-disabled]禁用时存在

下一步按钮 ​

日历导航按钮。根据当前日历视图，它将日历向后导航一个月/一年/十年。

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

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

asChild
布尔值

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

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

下一步
(((占位符：DateValue) => DateValue)

用于下一步的函数。覆盖 RangeCalendarRoot 上设置的 nextPage 函数。

步骤
'month' | 'year'

向前移动的日历单位。

数据属性值
[data-disabled]禁用时存在

标题 ​

用于显示当前月份和年份的标题。

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

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

asChild
布尔值

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

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

插槽（默认）有效载荷
标题值
字符串

当前月份和年份。

数据属性值
[data-disabled]禁用时存在

网格 ​

用于包装日历网格的容器。

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

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

asChild
布尔值

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

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

数据属性值
[data-readonly]只读时存在
[data-disabled]禁用时存在

网格头 ​

用于包装网格头的容器。

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

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

asChild
布尔值

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

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

网格体 ​

用于包装网格体的容器。

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

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

asChild
布尔值

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

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

网格行 ​

用于包装网格行的容器。

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

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

asChild
布尔值

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

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

头部单元格 ​

用于包装头部单元格的容器。用于显示星期。

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

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

asChild
布尔值

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

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

单元格 ​

用于包装日历单元格的容器。

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

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

asChild
布尔值

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

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

日期*
DateValue
数据属性值
[data-disabled]禁用时存在

单元格触发器 ​

用于显示单元格日期的可交互容器。单击它选择日期。

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

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

asChild
布尔值

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

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

日*
DateValue
月*
DateValue
数据属性值
[data-selected]选中时显示。
[data-value]日期的 ISO 字符串值。
[data-disabled]禁用时存在
[data-unavailable]不可用时显示。
[data-today]今天显示。
[data-outside-view]日期显示在当前月份之外时显示。
[data-outside-visible-view]日期显示在日历上可见的月份之外时显示。
[data-selection-start]日期是选择开始时显示。
[data-selection-end]日期是选择结束时显示。
[data-highlighted]用户在选择范围时突出显示日期时显示。
[data-highlighted-start]日期是用户突出显示的范围的开始时显示。
[data-highlighted-end]日期是用户突出显示的范围的结束时显示。
[data-focused]聚焦时显示。

可访问性 ​

键盘交互 ​

键描述
Tab
当焦点移到日期字段时，聚焦第一个部分。
空格
当焦点在 DateRangePickerNext 或 DateRangePickerPrev 上时，它将导航日历。否则，它将选择日期。如果焦点在 DateRangePickerTrigger 上，它将打开/关闭弹出窗口。
Enter
当焦点在 DateRangePickerNext 或 DateRangePickerPrev 上时，它将导航日历。否则，它将选择日期。如果焦点在 DateRangePickerTrigger 上，它将打开/关闭弹出窗口。
ArrowLeftArrowRight
在日期字段部分之间导航。如果焦点在 DateRangePickerCalendar 上，它将导航日期。
ArrowUpArrowDown
增加/更改部分的值。如果焦点在 DateRangePickerCalendar 上，它将导航日期。
0-9
当焦点在一个数字 DateRangePickerInput 上时，它将输入数字，如果下一个输入会导致无效的值，则聚焦下一个部分。
退格
从聚焦的数字部分中删除一个数字。
AP
当焦点在日期期间时，它将其设置为 AM 或 PM。