Calendar

Calendarは、日付の表示や選択ができるコンポーネントです。

プロパティ

Calendarは、以下のプロパティをサポートしています。

名前 型 デフォルト値 説明
value string "" 日付(YYYY-MM-DD)を渡すことができます。
min string 0001-01-01 選択できる最小値を設定できます。
max string 9999-12-31 選択できる最大値を設定できます。
start string "" 範囲選択の開始日を指定できます。
end string "" 範囲選択の終了日を指定できます。
enableRange boolean false 範囲選択が可能になります。
onChange (value: string) => void なし 日付が選択されたときのコールバック関数です。
onRangeChange (value: CalendarRange) => void なし 日付が範囲選択されたときのコールバック関数です。

CalendarDate

CalendarDateは、1日分の情報を表すオブジェクトです。

名前 型 デフォルト値 説明
value number なし 日付（数値）です。
outOfMonth boolean なし 表示範囲外の月かどうか。
disabled boolean なし 選択できるかどうか。
formatDate string なし フォーマット済みの日付文字列です。

CalendarRange

CalendarRangeは、範囲選択された日付の情報を表すオブジェクトです。

名前 型 デフォルト値 説明
start string "" 開始日です。
end string "" 終了日です。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

使い方

サンプル

Default

日付を表示・選択できます。

Min・Max

選択可能な範囲を指定できます。

Date

指定の日付を渡すことができます。

Range

日付を範囲選択することができます。

OnChange

コールバック関数で値を受け取ることができます。

With Input

InputDateとも組み合わせることができます。