日期和时间

如何在 Radix Vue 中使用日期和时间。

提示

我们与日期相关的组件的内部运作机制很大程度上受到 Adobe 的 React Aria 团队所做研究和工作的启发，他们创建了在无障碍性、用户体验和灵活性方面都表现出色的健壮日期组件。

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

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

$ npm add @internationalized/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 {
  createDateRange,
  createDecade,
  createMonth,
  createYear,
  createYearRange,
  getDaysInMonth,
  hasTime,
  isAfter,
  isAfterOrSame,
  isBefore,
  isBeforeOrSame,
  isBetween,
  isBetweenInclusive,
  isCalendarDateTime,
  isZonedDateTime,
  parseStringToDateValue,
  toDate,
} from 'radix-vue/date'

import { CalendarDate, type DateValue } from '@internationalized/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') // 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
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

日期和时间 ​

日期对象 ​

实用程序函数 ​

如何使用？ ​

日期和时间

日期对象

实用程序函数

如何使用？