Lzh on GitHub

日期和时间

如何在 Reka UI 中处理日期和时间。
我们日期相关组件的内部工作原理深受 Adobe 的 React Aria 团队所做的研究和工作的启发，他们创建了在可访问性、用户体验和灵活性方面表现出色的强大日期组件。

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

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

npm add @internationalized/date

Date 对象

我们使用 @internationalized/date 提供的 DateValue 对象来表示各种组件中的日期。这些对象是不可变的，并提供有关它们所表示的日期类型的信息：

  • CalendarDate: 不带时间部分的日期，例如 2023-10-11。
  • CalendarDateTime: 带时间部分但没有时区的日期，例如 2023-10-11T12:30:00。
  • ZonedDateTime: 带时间部分和时区的日期，例如 2023-10-11T21:00:00:00-04:00[America/New_York]。

使用这些对象的好处是我们可以非常具体地指定我们想要的日期类型，并且构建器的行为会适应该类型。

此外，您不必担心处理时区、夏令时或任何其他日期相关的细微差别。

工具函数

此包还提供了许多工具函数，解决了 JavaScript 中处理日期和时间带来的许多问题。

专门设计用于与 @internationalized/date 良好协作。

如何使用？

import type { DateValue } from '@internationalized/date'
import { CalendarDate } from '@internationalized/date'

import {
  createDateRange,
  createDecade,
  createMonth,
  createYear,
  createYearRange,
  getDaysInMonth,
  hasTime,
  isAfter,
  isAfterOrSame,
  isBefore,
  isBeforeOrSame,
  isBetween,
  isBetweenInclusive,
  isCalendarDateTime,
  isZonedDateTime,
  parseStringToDateValue,
  toDate,
} from 'reka-ui/date'

const date = new CalendarDate(1995, 8, 18)
const minDate = new CalendarDate(1995, 8, 1)
const maxDate = new CalendarDate(1995, 8, 31)

parseStringToDateValue('1995-08-18', date) // 返回一个 DateValue 对象
toDate(date) // 返回一个 Date 对象
isCalendarDateTime(date) // 返回 false
isZonedDateTime(date) // 返回 false
hasTime(date) // 返回 false
getDaysInMonth(date) // 返回 31
isAfter(date, minDate) // 返回 true
isBeforeOrSame(date, maxDate) // 返回 true
isAfterOrSame(date, minDate) // 返回 true
isBefore(date, maxDate) // 返回 true
isBetweenInclusive(date, minDate, maxDate) // 返回 true
isBetween(date, minDate, maxDate) // 返回 true

createMonth({ dateObj: new CalendarDate(1995, 8, 18), weekStartsOn: 0, locale: 'en', fixedWeeks: true }) // 返回一个月份的日期网格作为 DateValue，还包含 dateObj，以及一个月份的日期数组
createYear({ dateObj: new CalendarDate(1995, 8, 18), numberOfMonths: 2, pagedNavigation: true }) // 返回一个月份数组作为 DateValue，以 dateObj 为中心，并考虑 numberOfMonths 和 pagedNavigation 返回月份
createDecade({ dateObj: new CalendarDate(1995, 8, 18), startIndex: -10, endIndex: 10 }) // 返回以 dateObj 为中心的十年
createDateRange({ start: new CalendarDate(1995, 8, 18), end: new CalendarDate(2005, 8, 18) }) // 返回开始日期和结束日期之间的日期数组作为 DateValue
createYearRange({ start: new CalendarDate(1995, 8, 18), end: new CalendarDate(2005, 8, 18) }) // 返回开始日期和结束日期之间的年份数组作为 DateValue