DatePicker

ユーザーに日付を指定させる際に使用するコンポーネントです。フォーカスするとCalendarが開き、視覚的に日付を選択できます。

和暦による入力に対応するため独自で作成しています。例えば、「令和4年12月3日」という日付を入力欄に貼り付けると「2022-12-03」に変換する機能を備えています。

Props

name
string

input 要素の name 属性の値

width
string number

コンポーネントの幅

from
Date

選択可能な期間の開始日

to
Date

選択可能な期間の終了日

disabled
false true

フォームを無効にするかどうか

value
string

input 要素の value 属性の値

placeholder非推奨
string

@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。

error
false true

フォームにエラーがあるかどうか

parseInput
(input: string) => Date

入力を独自にパースする場合に、パース処理を記述する関数

formatDate
(date: Date) => string

表示する日付を独自にフォーマットする場合に、フォーマット処理を記述する関数

showAlternative
(date: Date) => ReactNode

入出力用文字列と併記する別フォーマット処理を記述する関数

onChangeDate
(date: Date, value: string, other: { errors: string[]; }) => void

選択された日付が変わった時に発火するコールバック関数