Radix Vue

外観

日付範囲ピッカー ​

アルファ
入力とカレンダーベースのインターフェースを介して日付範囲の選択を容易にします。
月
日
年
-
月
日
年
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  DateRangePickerArrow,
  DateRangePickerCalendar,
  DateRangePickerCell,
  DateRangePickerCellTrigger,
  DateRangePickerContent,
  DateRangePickerField,
  DateRangePickerGrid,
  DateRangePickerGridBody,
  DateRangePickerGridHead,
  DateRangePickerGridRow,
  DateRangePickerHeadCell,
  DateRangePickerHeader,
  DateRangePickerHeading,
  DateRangePickerInput,
  DateRangePickerNext,
  DateRangePickerPrev,
  DateRangePickerRoot,
  DateRangePickerTrigger,
  Label,
} from 'radix-vue'
</script>

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

          -
        </span>
        <template
          v-for="item in segments.end"
          :key="item.part"
        >
          <DateRangePickerInput
            v-if="item.part === 'literal'"
            :part="item.part"
            type="end"
          >
            {{ item.value }}
          </DateRangePickerInput>
          <DateRangePickerInput
            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"
            type="end"
          >
            {{ item.value }}
          </DateRangePickerInput>
        </template>

        <DateRangePickerTrigger class="ml-4 focus:shadow-[0_0_0_2px] focus:shadow-black">
          <Icon
            icon="radix-icons:calendar"
            class="w-6 h-6"
          />
        </DateRangePickerTrigger>
      </DateRangePickerField>

      <DateRangePickerContent
        :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"
      >
        <DateRangePickerArrow class="fill-white" />
        <DateRangePickerCalendar
          v-slot="{ weekDays, grid }"
          class="p-4"
        >
          <DateRangePickerHeader class="flex items-center justify-between">
            <DateRangePickerPrev
              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"
              />
            </DateRangePickerPrev>

            <DateRangePickerHeading class="text-[15px] text-black font-medium" />
            <DateRangePickerNext
              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"
              />
            </DateRangePickerNext>
          </DateRangePickerHeader>
          <div
            class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
          >
            <DateRangePickerGrid
              v-for="month in grid"
              :key="month.value.toString()"
              class="w-full border-collapse select-none space-y-1"
            >
              <DateRangePickerGridHead>
                <DateRangePickerGridRow class="mb-1 flex w-full justify-between">
                  <DateRangePickerHeadCell
                    v-for="day in weekDays"
                    :key="day"
                    class="w-8 rounded-md text-xs !font-normal text-black"
                  >
                    {{ day }}
                  </DateRangePickerHeadCell>
                </DateRangePickerGridRow>
              </DateRangePickerGridHead>
              <DateRangePickerGridBody>
                <DateRangePickerGridRow
                  v-for="(weekDates, index) in month.rows"
                  :key="`weekDate-${index}`"
                  class="flex w-full"
                >
                  <DateRangePickerCell
                    v-for="weekDate in weekDates"
                    :key="weekDate.toString()"
                    :date="weekDate"
                  >
                    <DateRangePickerCellTrigger
                      :day="weekDate"
                      :month="month.value"
                      class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 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 "
                    />
                  </DateRangePickerCell>
                </DateRangePickerGridRow>
              </DateRangePickerGridBody>
            </DateRangePickerGrid>
          </div>
        </DateRangePickerCalendar>
      </DateRangePickerContent>
    </DateRangePickerRoot>
  </div>
</template>

クレジット

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

機能 ​

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

前書き ​

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

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

インストール ​

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

sh
$ npm add @internationalized/date

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

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートして組み合わせます。

vue
<script setup>
import {
  DateRangePickerAnchor,
  DateRangePickerArrow,
  DateRangePickerCalendar,
  DateRangePickerCell,
  DateRangePickerCellTrigger,
  DateRangePickerClose,
  DateRangePickerContent,
  DateRangePickerField,
  DateRangePickerGrid,
  DateRangePickerGridBody,
  DateRangePickerGridHead,
  DateRangePickerGridRow,
  DateRangePickerHeadCell,
  DateRangePickerHeader,
  DateRangePickerHeading,
  DateRangePickerInput,
  DateRangePickerNext,
  DateRangePickerPrev,
  DateRangePickerRoot,
  DateRangePickerTrigger,
} from 'radix-vue'
</script>

<template>
  <DateRangePickerRoot>
    <DateRangePickerField>
      <DateRangePickerInput />
      <DateRangePickerTrigger />
    </DateRangePickerField>

    <DateRangePickerAnchor />

    <DateRangePickerContent>
      <DateRangePickerClose />
      <DateRangePickerArrow />

      <DateRangePickerCalendar>
        <DateRangePickerHeader>
          <DateRangePickerPrev />
          <DateRangePickerHeading />
          <DateRangePickerNext />
        </DateRangePickerHeader>

        <DateRangePickerGrid>
          <DateRangePickerGridHead>
            <DateRangePickerGridRow>
              <DateRangePickerHeadCell />
            </DateRangePickerGridRow>
          </DateRangePickerGridHead>

          <DateRangePickerGridBody>
            <DateRangePickerGridRow>
              <DateRangePickerCell>
                <DateRangePickerCellTrigger />
              </DateRangePickerCell>
            </DateRangePickerGridRow>
          </DateRangePickerGridBody>
        </DateRangePickerGrid>
      </DateRangePickerCalendar>
    </DateRangePickerContent>
  </DateRangePickerRoot>
</template>

APIリファレンス ​

ルート ​

日付ピッカーのすべてのパーツが含まれています

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

defaultOpen
false
boolean

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

defaultPlaceholder
DateValue

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

defaultValue
{ start: undefined, end: undefined }
DateRange

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

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
DateRange

カレンダーの制御されたチェック状態。 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

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

イベントペイロード
update:modelValue
[date: DateRange]

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

update:open
[value: boolean]

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

update:placeholder
[date: DateValue]

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

update:startValue
[date: DateValue]

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

フィールド ​

日付ピッカーの日付フィールドセグメントとトリガーが含まれています

スロット（デフォルト）ペイロード
セグメント
{ start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }
modelValue
DateRange
データ属性値
[data-readonly]読み取り専用の場合に存在
[data-disabled]無効になっている場合に存在
[data-invalid]無効な場合に存在

入力 ​

日付ピッカーの日付フィールドセグメントが含まれています

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

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

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

type*
'start' | 'end'

レンダリングするフィールドのタイプ（開始または終了）

データ属性値
[data-disabled]無効になっている場合に存在
[data-invalid]無効な場合に存在
[data-placeholder]値が設定されていない場合に存在

トリガー ​

ポップオーバーの表示/非表示を切り替えるボタンです。 デフォルトでは、DateRangePickerContent はトリガーに対して自身を配置します。

プロパティデフォルトタイプ
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'

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

イベントペイロード
closeAutoFocus（閉じる際の自動フォーカス）
[event: Event]

閉じる際に自動フォーカスが実行されたときに呼び出されるイベントハンドラです。 prevented することができます。

escapeKeyDown（Escape キー押下）
[event: KeyboardEvent]

Escape キーが押されたときに呼び出されるイベントハンドラです。 prevented することができます。

focusOutside（外部フォーカス）
[event: FocusOutsideEvent]

フォーカスが DismissableLayer の外に移動したときに呼び出されるイベントハンドラです。 prevented することができます。

interactOutside（外部インタラクション）
[event: PointerDownOutsideEvent | FocusOutsideEvent]

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

openAutoFocus (開く際の自動フォーカス)
[event: Event]

開く際に自動フォーカスが実行されたときに呼び出されるイベントハンドラです。prevented することができます。

pointerDownOutside（外部ポインターダウン）
[event: PointerDownOutsideEvent]

DismissableLayer の外部で pointerdown イベントが発生したときに呼び出されるイベントハンドラです。 prevented することができます。

矢印 ​

ポップオーバーと一緒にレンダリングするオプションの矢印要素です。これは、アンカーと PopoverContent を視覚的にリンクするのに役立ちます。PopoverContent 内にレンダリングする必要があります。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

height（高さ）
number

矢印の高さ（ピクセル単位）です。

width（幅）
number

矢印の幅（ピクセル単位）です。

矢印 ​

ポップオーバーと一緒にレンダリングするオプションの矢印要素です。これは、アンカーと DateRangePickerContent を視覚的にリンクするのに役立ちます。 DateRangePickerContent 内にレンダリングする必要があります。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

height（高さ）
number

矢印の高さ（ピクセル単位）です。

width（幅）
number

矢印の幅（ピクセル単位）です。

閉じる ​

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

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

アンカー ​

DateRangePickerContent の配置基準となるオプションの要素です。このパートを使用しない場合、コンテンツは DateRangePickerTrigger に沿って配置されます。

プロパティデフォルトタイプ
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-readonly]読み取り専用の場合に存在
[data-disabled]無効になっている場合に存在
[data-invalid]無効な場合に存在

ナビゲーションボタンと見出しセグメントが含まれています。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

戻るボタン ​

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

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

prevPage（前のページ）
((placeholder: DateValue) => DateValue)

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

step（ステップ）
'month' | 'year'

移動するカレンダー単位

データ属性値
[data-disabled]無効になっている場合に存在

次へボタン ​

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

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

nextPage（次のページ）
((placeholder: DateValue) => DateValue)

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

step（ステップ）
'month' | 'year'

移動するカレンダー単位

データ属性値
[data-disabled]無効になっている場合に存在

見出し ​

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

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

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

現在の月と年

データ属性値
[data-disabled]無効になっている場合に存在

グリッド ​

カレンダーグリッドを囲むためのコンテナです。

プロパティデフォルトタイプ
as
'div'
AsTag | コンポーネント

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

asChild
boolean

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

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

データ属性値
[data-readonly]読み取り専用の場合に存在
[data-disabled]無効になっている場合に存在

グリッドヘッダー ​

グリッドヘッダーを囲むためのコンテナです。

プロパティデフォルトタイプ
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-selection-start] (選択開始)日付が選択の開始日である場合に存在します。
[data-selection-end] (選択終了)日付が選択の終了日である場合に存在します。
[data-highlighted] (強調表示)ユーザーが範囲を選択する際に日付が強調表示されている場合に存在します。
[data-highlighted-start] (強調表示開始)日付がユーザーによって強調表示されている範囲の開始日である場合に存在します。
[data-highlighted-end] (強調表示終了)日付がユーザーによって強調表示されている範囲の終了日である場合に存在します。
[data-focused] (フォーカス)フォーカスされている場合に存在します。

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
フォーカスが日付フィールドに移動すると、最初のセグメントにフォーカスします。
Space（スペース）
フォーカスが DateRangePickerNext または DateRangePickerPrev にある場合、カレンダーを移動します。それ以外の場合、日付を選択します。フォーカスが DateRangePickerTrigger にある場合、ポップオーバーを開閉します。
Enter（エンター）
フォーカスが DateRangePickerNext または DateRangePickerPrev にある場合、カレンダーを移動します。それ以外の場合、日付を選択します。フォーカスが DateRangePickerTrigger にある場合、ポップオーバーを開閉します。
左矢印右矢印
日付フィールドのセグメント間を移動します。フォーカスが DateRangePickerCalendar にある場合、日付間を移動します。
上矢印下矢印
セグメントの値を増減/変更します。フォーカスが DateRangePickerCalendar にある場合、日付間を移動します。
0-9
フォーカスが数字の DateRangePickerInput にある場合、数字を入力し、次の入力が無効な値になる場合は次のセグメントにフォーカスします。
Backspace（バックスペース）
フォーカスされている数値セグメントから数字を削除します。
AP
フォーカスが午前/午後にある場合、午前または午後に設定します。