DatePicker
input[type="date"]の代わりに使用するコンポーネントです。この要素にフォーカスするとCalendarが開き、視覚的に日付を選択できます。
和暦による入力に対応するため独自で作成しています。例えば、「令和4年12月3日」という日付を入力欄に貼り付けると「2022-12-03」に変換する機能を備えています。
Props
name
string
input 要素の name 属性の値
width
stringnumber
コンポーネントの幅
from
Date
選択可能な期間の開始日
to
Date
選択可能な期間の終了日
disabled
falsetrue
フォームを無効にするかどうか
value
string
input 要素の value 属性の値
placeholder非推奨
string
@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。
error
falsetrue
フォームにエラーがあるかどうか
parseInput
(input: string) => Date
入力を独自にパースする場合に、パース処理を記述する関数
formatDate
(date: Date) => string
表示する日付を独自にフォーマットする場合に、フォーマット処理を記述する関数
showAlternative
(date: Date) => ReactNode
入出力用文字列と併記する別フォーマット処理を記述する関数
onChangeDate
(date: Date, value: string, other: { errors: string[]; }) => void
選択された日付が変わった時に発火するコールバック関数