Radix Vue

外観

日付と時刻 ​

Radix Vueでの日付と時刻の扱い方。

ヒント

当社の日付関連コンポーネントの内部動作は、アクセシビリティ、ユーザーエクスペリエンス、柔軟性に優れた堅牢な日付コンポーネントを作成したAdobeのReact Ariaチームによる研究と作業から多大な影響を受けています。

このコンポーネントは、JavaScriptでの日付と時刻の処理に伴う多くの問題を解決する@internationalized/dateパッケージに依存しています。

このパッケージのドキュメントをよく読んで動作をしっかり理解することを強くお勧めします。日付関連コンポーネントを使用するには、プロジェクトにインストールする必要があります。

sh
$ 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と連携して動作するように特別に設計されています。

使用方法 ​

ts
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