日期与时间

如何在 Reka UI 中处理日期和时间。

提示

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

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

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

$ npm add @internationalized/date

日期对象

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

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,
  getWeekNumber,
  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) // returns a DateValue object
toDate(date) // returns a Date object
isCalendarDateTime(date) // returns false
isZonedDateTime(date) // returns false
hasTime(date) // returns false
getDaysInMonth(date) // returns 31
getWeekNumber(new CalendarDate(1995, 8, 18), 'en-US', 'sun') // returns 33
isAfter(date, minDate) // returns true
isBeforeOrSame(date, maxDate) // returns true
isAfterOrSame(date, minDate) // returns true
isBefore(date, maxDate) // returns true
isBetweenInclusive(date, minDate, maxDate) // returns true
isBetween(date, minDate, maxDate) // returns true
createMonth({ dateObj: new CalendarDate(1995, 8, 18), weekStartsOn: 0, locale: 'en', fixedWeeks: true }) // returns a grid of days as DateValue for the month, also containing the dateObj, plus an array of days for the month
createYear({ dateObj: new CalendarDate(1995, 8, 18), numberOfMonths: 2, pagedNavigation: true }) // returns an array of months as DateValue, centered around the dateObj taking into account the numberOfMonths and pagedNavigation when returning the months
createDecade({ dateObj: new CalendarDate(1995, 8, 18), startIndex: -10, endIndex: 10 }) // returns a decade centered around the dateObj
createDateRange({ start: new CalendarDate(1995, 8, 18), end: new CalendarDate(2005, 8, 18) }) // returns an array of dates as DateValue between the start and end date
createYearRange({ start: new CalendarDate(1995, 8, 18), end: new CalendarDate(2005, 8, 18) }) // returns an array of years as DateValue between the start and end date

日期与时间 ​

日期对象 ​

实用函数 ​

如何使用？ ​

日期与时间

日期对象

实用函数

如何使用？