Radix Vue

外観

日付フィールド ​

アルファ
指定したフィールドに特定の日付を入力できます。
mm
dd
yyyy
vue
<script setup lang="ts">
import { DateFieldInput, DateFieldRoot, Label } from 'radix-vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <Label
      class="text-sm text-white"
      for="date-field"
    >Birthday</Label>
    <DateFieldRoot
      id="date-field"
      v-slot="{ segments }"
      :is-date-unavailable="date => date.day === 19"
      class="w-36 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"
        :key="item.part"
      >
        <DateFieldInput
          v-if="item.part === 'literal'"
          :part="item.part"
        >
          {{ item.value }}
        </DateFieldInput>
        <DateFieldInput
          v-else
          :part="item.part"
          class="rounded p-0.5   focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
        >
          {{ item.value }}
        </DateFieldInput>
      </template>
    </DateFieldRoot>
  </div>
</template>

クレジット

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

機能 ​

  • 完全キーボードナビゲーション
  • 制御または非制御可能
  • ローカリゼーション対応
  • 高い構成性
  • デフォルトでアクセス可能
  • 日付と日付時刻の両方の形式に対応

序文 ​

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

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

インストール ​

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

sh
$ npm add @internationalized/date

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

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートし、それらを組み合わせてください。

vue
<script setup>
import {
  DateFieldInput,
  DateFieldRoot,
} from 'radix-vue'
</script>

<template>
  <DateFieldRoot>
    <DateFieldInput />
  </DateFieldRoot>
</template>

APIリファレンス ​

ルート ​

日付フィールドのすべてのパーツを含みます

プロパティデフォルトタイプ
as
'div'
AsTag | Component

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

asChild
boolean

childとして渡されたもののためにデフォルトのレンダリングされた要素を変更し、それらのpropsと動作をマージします。

詳細についてはコンポジションガイドをお読みください。

defaultPlaceholder
DateValue

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

defaultValue
DateValue

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

dir
'ltr' | 'rtl'

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

disabled
false
boolean

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

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

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

hideTimeZone
boolean

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

hourCycle
12 | 24

時刻の書式設定に使用される時制。デフォルトはローカル環境の設定

id
文字列

要素の ID（識別子）

isDateUnavailable
マッチャー

日付が利用可能かどうかに関する関数を返します。

locale
'en'
文字列

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

maxValue
DateValue

選択できる最大の日付

minValue
DateValue

選択できる最小の日付

modelValue
DateValue

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

name
文字列

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

placeholder
DateValue

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

readonly
false
boolean

日付フィールドを読み取り専用にするかどうか

required
boolean

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

イベントの発生ペイロード
update:modelValue
[date: DateValue]

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

update:placeholder
[date: DateValue]

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

スロット（デフォルト）ペイロード
modelValue
DateValue | undefined

フィールドの現在の日付

segments
{ part: SegmentPart; value: string; }[]

日付フィールドのセグメントの内容

isInvalid
boolean

入力が無効の場合の値

メソッドタイプ
setFocusedElement
(el: HTMLElement) => void

DateField 内のフォーカスされた要素を設定するためのヘルパー

データ属性値
[data-readonly]readonly のときに存在
[data-disabled]disabled のときに存在
[data-invalid]無効のときに存在

入力

日付フィールドのセグメントが含まれます

プロパティデフォルトタイプ
as
'div'
AsTag | Component

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

asChild
boolean

childとして渡されたもののためにデフォルトのレンダリングされた要素を変更し、それらのpropsと動作をマージします。

詳細についてはコンポジションガイドをお読みください。

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

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

データ属性値
[data-disabled]disabled のときに存在
[data-invalid]無効のときに存在
[data-placeholder]値が設定されていないときに存在

アクセシビリティ

キーボードでの操作

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