Radix Vue

外観

日付ピッカー ​

アルファ
入力とカレンダーベースのインターフェースを通じて日付の選択を容易にします。
mm
dd
yyyy
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  DatePickerArrow,
  DatePickerCalendar,
  DatePickerCell,
  DatePickerCellTrigger,
  DatePickerContent,
  DatePickerField,
  DatePickerGrid,
  DatePickerGridBody,
  DatePickerGridHead,
  DatePickerGridRow,
  DatePickerHeadCell,
  DatePickerHeader,
  DatePickerHeading,
  DatePickerInput,
  DatePickerNext,
  DatePickerPrev,
  DatePickerRoot,
  DatePickerTrigger,
  Label,
} from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      class="text-sm text-white"
      for="date-field"
    >Birthday</Label>
    <DatePickerRoot
      id="date-field"
      :is-date-unavailable="date => date.day === 19"
    >
      <DatePickerField
        v-slot="{ segments }"
        class="flex select-none bg-white items-center justify-between rounded-lg text-center text-green10 border border-transparent p-1 w-40 data-[invalid]:border-red-500"
      >
        <div class="flex items-center">
          <template
            v-for="item in segments"
            :key="item.part"
          >
            <DatePickerInput
              v-if="item.part === 'literal'"
              :part="item.part"
            >
              {{ item.value }}
            </DatePickerInput>
            <DatePickerInput
              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 "
            >
              {{ item.value }}
            </DatePickerInput>
          </template>
        </div>

        <DatePickerTrigger class="focus:shadow-[0_0_0_2px] rounded-md text-xl p-1 focus:shadow-black">
          <Icon icon="radix-icons:calendar" />
        </DatePickerTrigger>
      </DatePickerField>

      <DatePickerContent
        :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"
      >
        <DatePickerArrow class="fill-white" />
        <DatePickerCalendar
          v-slot="{ weekDays, grid }"
          class="p-4"
        >
          <DatePickerHeader class="flex items-center justify-between">
            <DatePickerPrev
              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"
              />
            </DatePickerPrev>

            <DatePickerHeading class="text-black font-medium" />
            <DatePickerNext
              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"
              />
            </DatePickerNext>
          </DatePickerHeader>
          <div
            class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
          >
            <DatePickerGrid
              v-for="month in grid"
              :key="month.value.toString()"
              class="w-full border-collapse select-none space-y-1"
            >
              <DatePickerGridHead>
                <DatePickerGridRow class="mb-1 flex w-full justify-between">
                  <DatePickerHeadCell
                    v-for="day in weekDays"
                    :key="day"
                    class="w-8 rounded-md text-xs text-green8"
                  >
                    {{ day }}
                  </DatePickerHeadCell>
                </DatePickerGridRow>
              </DatePickerGridHead>
              <DatePickerGridBody>
                <DatePickerGridRow
                  v-for="(weekDates, index) in month.rows"
                  :key="`weekDate-${index}`"
                  class="flex w-full"
                >
                  <DatePickerCell
                    v-for="weekDate in weekDates"
                    :key="weekDate.toString()"
                    :date="weekDate"
                  >
                    <DatePickerCellTrigger
                      :day="weekDate"
                      :month="month.value"
                      class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white 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 data-[selected]:before:bg-white"
                    />
                  </DatePickerCell>
                </DatePickerGridRow>
              </DatePickerGridBody>
            </DatePickerGrid>
          </div>
        </DatePickerCalendar>
      </DatePickerContent>
    </DatePickerRoot>
  </div>
</template>

クレジット

このコンポーネントは、melt-uiの実装からインスピレーションを得て構築されました。

機能 ​

  • フルキーボードナビゲーション
  • 制御可能または非制御可能
  • フォーカスは完全に管理されています
  • ローカライズサポート
  • デフォルトでアクセシブル
  • 日付と日時両方のフォーマットをサポート

まえがき ​

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

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

インストール ​

日付パッケージをインストールします。

sh
$ npm add @internationalized/date

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成 ​

すべての部品をインポートして組み合わせてください。

vue
<script setup>
import {
  DatePickerAnchor,
  DatePickerArrow,
  DatePickerCalendar,
  DatePickerCell,
  DatePickerCellTrigger,
  DatePickerClose,
  DatePickerContent,
  DatePickerField,
  DatePickerGrid,
  DatePickerGridBody,
  DatePickerGridHead,
  DatePickerGridRow,
  DatePickerHeadCell,
  DatePickerHeader,
  DatePickerHeading,
  DatePickerInput,
  DatePickerNext,
  DatePickerPrev,
  DatePickerRoot,
  DatePickerTrigger,
} from 'radix-vue'
</script>

<template>
  <DatePickerRoot>
    <DatePickerField>
      <DatePickerInput />
      <DatePickerTrigger />
    </DatePickerField>

    <DatePickerAnchor />
    <DatePickerContent>
      <DatePickerClose />
      <DatePickerArrow />

      <DatePickerCalendar>
        <DatePickerHeader>
          <DatePickerPrev />
          <DatePickerHeading />
          <DatePickerNext />
        </DatePickerHeader>

        <DatePickerGrid>
          <DatePickerGridHead>
            <DatePickerGridRow>
              <DatePickerHeadCell />
            </DatePickerGridRow>
          </DatePickerGridHead>

          <DatePickerGridBody>
            <DatePickerGridRow>
              <DatePickerCell>
                <DatePickerCellTrigger />
              </DatePickerCell>
            </DatePickerGridRow>
          </DatePickerGridBody>
        </DatePickerGrid>
      </DatePickerCalendar>
    </DatePickerContent>
  </DatePickerRoot>
</template>

APIリファレンス ​

ルート ​

日付ピッカーのすべての部品を含みます

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

defaultOpen
false
boolean

最初にレンダリングされたときのポップオーバーの開閉状態。開閉状態を制御する必要がない場合に使用します。

defaultPlaceholder
DateValue

デフォルトのプレースホルダー日付

defaultValue
DateValue

カレンダーのデフォルト値

dir
‘ltr’ | ‘rtl’

該当する日付フィールドの読み取り方向。
省略した場合、グローバルに`ConfigProvider`から継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
false
boolean

日付フィールドが無効かどうか

fixedWeeks
false
boolean

カレンダーに常に6週間表示するかどうか

granularity
‘day’ | ‘hour’ | ‘minute’ | ‘second’

時刻のフォーマットに使用する粒度。CalendarDateが指定されている場合はdayを、そうでない場合はminuteをデフォルトとします。フィールドは、指定された粒度まで、日付の各部分をセグメントとしてレンダリングします。

hideTimeZone
boolean

フィールドのタイムゾーンセグメントを非表示にするかどうか

hourCycle
12 | 24

時刻のフォーマットに使用される時間サイクル。ローカル設定をデフォルトとします。

id
string

要素のID

isDateDisabled
Matcher

日付が無効かどうかを返す関数

isDateUnavailable
Matcher

日付が使用できないかどうかを返す関数

locale
‘en’
string

日付のフォーマットに使用するロケール

maxValue
DateValue

選択できる最大日付

minValue
DateValue

選択できる最小日付

modal
false
boolean

ポップオーバーのモダリティ。trueに設定すると、外部要素とのインタラクションが無効になり、スクリーンリーダーにはポップオーバーコンテンツのみが表示されます。

modelValue
DateValue

カレンダーの制御されたチェック状態。`v-model`としてバインドできます。

name
string

日付フィールドの名前。名前/値ペアの一部として、所有するフォームと共に送信されます。

numberOfMonths
1
number

一度に表示する月の数

open
boolean

ポップオーバーの制御された開閉状態。

pagedNavigation
false
boolean

このプロパティにより、前後のボタンは1か月ではなく、一度に表示される月の数だけ移動します。

placeholder
DateValue

プレースホルダーの日付。日付が選択されていない場合に表示する月を決定するために使用されます。ユーザーがカレンダーを移動すると更新され、カレンダーのビューをプログラムで制御するために使用できます。

preventDeselect
false
boolean

別の日に選択せずに日付の選択を解除することを防ぐかどうか

readonly
false
boolean

日付フィールドが読み取り専用かどうか

required
boolean

`true`の場合、所有するフォームを送信する前にユーザーが日付フィールドをチェックする必要があることを示します。

weekdayFormat
‘narrow’
‘narrow’ | ‘short’ | ‘long’

weekdaysスロットプロップを介して提供される曜日文字列に使用する形式

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

カレンダーを開始する曜日

Emitペイロード
update:modelValue
[date: DateValue]

モデル値が変更されるたびに呼び出されるイベントハンドラー

update:open
[value: boolean]

サブメニューの開閉状態が変更されたときに呼び出されるイベントハンドラー。

update:placeholder
[date: DateValue]

プレースホルダーの値が変更されるたびに呼び出されるイベントハンドラー

フィールド ​

日付ピッカーの日付フィールドセグメントとトリガーを含みます

スロット（デフォルト）ペイロード
segments
{ part: SegmentPart; value: string; }[]
modelValue
DateValue | undefined
データ属性値
[data-readonly]読み取り専用の場合に表示されます
[data-disabled]無効の場合に表示されます
[data-invalid]無効の場合に表示されます

入力 ​

日付ピッカーの日付フィールドセグメントを含みます

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

part*
‘day’ | ‘month’ | ‘year’ | ‘hour’ | ‘minute’ | ‘second’ | ‘dayPeriod’ | ‘literal’ | ‘timeZoneName’

レンダリングする日付の部分

データ属性値
[data-disabled]無効の場合に表示されます
[data-invalid]無効の場合に表示されます
[data-placeholder]値が設定されていない場合に表示されます

トリガー ​

ポップオーバーを切り替えるボタン。デフォルトでは、`DatePickerContent`はトリガーに対して配置されます。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

コンテンツ ​

ポップオーバーが開いているときに表示されるコンポーネント。

プロパティデフォルト値型
align
‘start’ | ‘center’ | ‘end’

トリガーに対する優先される配置。衝突が発生した場合は変更される可能性があります。

alignOffset
number

`start`または`end`の配置オプションからのピクセル単位のオフセット。

arrowPadding
number

矢印とコンテンツの端の間のパディング。コンテンツにborder-radiusがある場合、これにより角がオーバーフローするのを防ぎます。

as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

avoidCollisions
boolean

`true`の場合、境界線との衝突を防ぐために、sideおよびalignの設定を上書きします。

collisionBoundary
Element | (Element | null)[] | null

衝突境界として使用される要素。デフォルトではビューポートですが、このチェックに含める追加の要素を提供できます。

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

境界線の端から衝突検出が発生する距離（ピクセル単位）。数値（すべての辺で同じ）、または部分的なパディングオブジェクト（例：{ top: 20, left: 20 }）を受け入れます。

disableOutsidePointerEvents
boolean

`true`の場合、`DismissableLayer`の外側の要素では、ホバー/フォーカス/クリックのインタラクションが無効になります。ユーザーは、外側の要素とやり取りするために2回クリックする必要があります。1回目は`DismissableLayer`を閉じ、2回目は要素をトリガーします。

forceMount
boolean

より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。

hideWhenDetached
boolean

トリガーが完全に隠されたときにコンテンツを非表示にするかどうか。

prioritizePosition
boolean

コンテンツをビューポート内に強制的に配置します。

参照要素と重なる可能性があり、望ましくない場合があります。

side
‘top’ | ‘right’ | ‘bottom’ | ‘left’

開いているときにトリガーに対してレンダリングする優先される辺。衝突が発生し、avoidCollisionsが有効になっている場合は反転されます。

sideOffset
number

トリガーからの距離（ピクセル単位）。

sticky
‘partial’ | ‘always’

位置合わせ軸のスティッキー動作。partialは、トリガーが境界内に少なくとも部分的に含まれている限り、コンテンツを境界内に保持します。「always」は、トリガーの状態に関係なく、コンテンツを境界内に保持します。

trapFocus
boolean

フォーカスをMenuContent内に閉じ込めるかどうか。

updatePositionStrategy
'always' | 'optimized'

アニメーションフレームごとにフローティング要素の位置を更新する戦略。

Emitペイロード
closeAutoFocus
[イベント: Event]

閉じるときに自動フォーカス時に呼び出されるイベントハンドラ。キャンセル可能です。

escapeKeyDown
[イベント: KeyboardEvent]

Escapeキーが押されたときに呼び出されるイベントハンドラ。キャンセル可能です。

focusOutside
[イベント: FocusOutsideEvent]

フォーカスがDismissableLayerの外に移動したときに呼び出されるイベントハンドラ。キャンセル可能です。

interactOutside
[イベント: PointerDownOutsideEvent | FocusOutsideEvent]

DismissableLayerの外でインタラクションが発生したときに呼び出されるイベントハンドラ。具体的には、外部でpointerdownイベントが発生した場合、またはフォーカスがその外に移動した場合です。キャンセル可能です。

openAutoFocus
[イベント: Event]

開いたときに自動フォーカス時に呼び出されるイベントハンドラ。キャンセル可能です。

pointerDownOutside
[イベント: PointerDownOutsideEvent]

DismissableLayerの外でpointerdownイベントが発生したときに呼び出されるイベントハンドラ。キャンセル可能です。

矢印 ​

ポポバーとともにレンダリングするためのオプションの矢印要素。これを使用して、アンカーとDatePickerContentの視覚的なリンクを支援できます。DatePickerContent内でレンダリングする必要があります。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

height
number

矢印の高さをピクセル単位で指定します。

width
number

矢印の幅をピクセル単位で指定します。

閉じる ​

開いている日付ピッカーを閉じるボタン。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

アンカー ​

DatePickerContentを基準に配置するためのオプションの要素。この部分が使用されない場合、コンテンツはDatePickerTriggerと共に配置されます。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

element
Measurable

カレンダー ​

カレンダーのすべての部分を含みます。

スロット（デフォルト）ペイロード
date
DateValue
grid
Grid<DateValue>[]
weekDays
string[]
weekStartsOn
0 | 1 | 2 | 3 | 4 | 5 | 6
locale
string
fixedWeeks
boolean
データ属性値
[data-disabled]無効の場合に表示されます
[data-invalid]無効の場合に表示されます
[data-readonly]読み取り専用の場合に表示されます

ナビゲーションボタンと見出しセグメントを含みます。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

前へボタン ​

カレンダーのナビゲーションボタン。現在のカレンダービューに基づいて、カレンダーを過去に1ヶ月/1年/10年移動します。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

prevPage
((placeholder: DateValue) => DateValue)

前のページに使用される関数。CalendarRootに設定されたprevPage関数を上書きします。

step
'month' | 'year'

戻るカレンダー単位

データ属性値
[data-disabled]無効の場合に表示されます

次へボタン ​

カレンダーのナビゲーションボタン。現在のカレンダービューに基づいて、カレンダーを将来に1ヶ月/1年/10年移動します。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

nextPage
((placeholder: DateValue) => DateValue)

次のページに使用される関数。CalendarRootに設定されたnextPage関数を上書きします。

step
'month' | 'year'

進むカレンダー単位

データ属性値
[data-disabled]無効の場合に表示されます

見出し ​

現在の月と年を表示するための見出し。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

スロット（デフォルト）ペイロード
headingValue
string

現在の月と年

グリッド ​

カレンダーグリッドをラップするコンテナ。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

データ属性値
[data-disabled]無効の場合に表示されます
[data-readonly]読み取り専用の場合に表示されます

グリッドヘッダー ​

グリッドヘッダーをラップするコンテナ。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

グリッドボディ ​

グリッドボディをラップするコンテナ。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

グリッド行 ​

グリッド行をラップするコンテナ。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

ヘッダーセル ​

ヘッダーセルをラップするコンテナ。曜日の表示に使用されます。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

セル ​

カレンダーセルをラップするコンテナ。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

date*
DateValue

セルの日付値。

データ属性値
[data-disabled]無効の場合に表示されます

セル トリガー ​

セルの日付を表示するためのインタラクティブなコンテナ。クリックすると日付が選択されます。

プロパティデフォルト値型
as
‘div’
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。

asChild
boolean

子として渡された要素のプロパティと動作をマージして、デフォルトでレンダリングされる要素を変更します。

詳細はコンポジションガイドをご覧ください。

day*
DateValue

セル トリガーに提供される日付値。

month*
DateValue

セルがレンダリングされる月。

データ属性値
[data-selected]選択されている場合に表示されます。
[data-value]日付のISO文字列値。
[data-disabled]無効の場合に表示されます
[data-unavailable]使用できない場合に表示されます。
[data-today]今日である場合に表示されます。
[data-outside-view]表示されている現在の月以外の日付の場合に表示されます。
[data-outside-visible-view]カレンダーに表示されている月以外の日付の場合に表示されます。
[data-focused]フォーカスされている場合に表示されます。

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
日付フィールドにフォーカスが移動すると、最初のセグメントにフォーカスが設定されます。
Space
DatePickerNextまたはDatePickerPrevのいずれかにフォーカスがある場合、カレンダーを移動します。それ以外の場合は、日付を選択します。フォーカスがDatePickerTriggerにある場合、ポポバーを開閉します。
Enter
DatePickerNextまたはDatePickerPrevのいずれかにフォーカスがある場合、カレンダーを移動します。それ以外の場合は、日付を選択します。フォーカスがDatePickerTriggerにある場合、ポポバーを開閉します。
ArrowLeftArrowRight
日付フィールドセグメント間を移動します。フォーカスがDatePickerCalendarにある場合、日付間を移動します。
ArrowUpArrowDown
セグメントの値を増減します。フォーカスがDatePickerCalendarにある場合、日付間を移動します。
0-9
数値のDatePickerInputにフォーカスがある場合、数字を入力し、次の入力が無効な値になる場合は次のセグメントにフォーカスを移動します。
Backspace
フォーカスされている数値セグメントから数字を削除します。
AP
日付の午前午後部分にフォーカスがある場合、AMまたはPMに設定します。