Radix Vue

外観

日付範囲フィールド ​

アルファ
指定されたフィールド内に日付の範囲を入力できます。
月
日
年
-
月
日
年
vue
<script setup lang="ts">
import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      for="date-field"
      class="text-white"
    >Booking</Label>

    <DateRangeFieldRoot
      id="date-field"
      v-slot="{ segments }"
      :is-date-unavailable="date => date.day === 19"

      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"
      >
        <DateRangeFieldInput
          v-if="item.part === 'literal'"
          :part="item.part"
          type="start"
        >
          {{ item.value }}
        </DateRangeFieldInput>
        <DateRangeFieldInput
          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 }}
        </DateRangeFieldInput>
      </template>
      <span class="mx-2">

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

クレジット

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

機能 ​

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

前書き ​

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

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

インストール ​

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

sh
$ npm add @internationalized/date

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

sh
$ npm add radix-vue

構造 ​

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

vue
<script setup>
import {
  DateRangeFieldInput,
  DateRangeFieldRoot,
} from 'radix-vue'
</script>

<template>
  <DateRangeFieldRoot>
    <DateRangeFieldInput />
  </DateRangeFieldRoot>
</template>

API リファレンス ​

ルート ​

日付フィールドのすべてのパーツが含まれています

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

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

asChild
boolean

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

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

defaultPlaceholder
DateValue

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

defaultValue
DateRange

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

dir
'ltr' | 'rtl'

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

disabled
false
boolean

日付フィールドが無効になっているかどうか

granularity
'day' | 'hour' | 'minute' | 'second'

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

hideTimeZone
boolean

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

hourCycle
12 | 24

時刻の書式設定に使用される時間サイクル。デフォルトはローカル設定

id
string

要素の ID

isDateUnavailable
Matcher

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

locale
'en'
string

日付の書式設定に使用するロケール

maxValue
DateValue

選択可能な最大日付

minValue
DateValue

選択可能な最小日付

modelValue
DateRange

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

name
string

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

placeholder
DateValue

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

readonly
false
boolean

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

required
boolean

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

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

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

update:placeholder
[date: DateValue]

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

スロット (デフォルト)ペイロード
modelValue
DateRange
セグメント
{ start: { part: SegmentPart; value: string; }[]; end: { part: SegmentPart; value: string; }[]; }
メソッドタイプ
setFocusedElement
(el: HTMLElement) => void
データ属性値
[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]値が設定されていない場合に存在

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
フォーカスが日付フィールドに移動すると、最初のセグメントにフォーカスします。
←→
日付フィールドセグメント間を移動します。
↑↓
セグメントの値を増減/変更します。
0-9
フォーカスが数値 DateFieldInput にある場合、数値を入力し、次の入力が無効な値になる場合は次のセグメントにフォーカスします。
Backspace
フォーカスされている数値セグメントから数字を削除します。
AP
フォーカスが午前/午後にある場合、午前または午後に設定します。