SmartHR Design System

WarekiPicker

和暦で日付を入力させ西暦に変換する機能を備えた入力コンポーネントです。和暦の日付入力が必要なときに使います。

例えば、「令和4年12月3日」という日付を入力欄に貼り付けると「2022-12-03」に変換する機能を備えています。

使用上の注意

和暦を西暦に変換できることを明示する

コンポーネントの見た目からは和暦変換できることがわからないため、和暦変換できることをラベルや説明文を使って明示してください。

アクセシビリティ

開発時の考慮点

FormControlと併用する

WarekiPickerコンポーネントは必ずFormControlコンポーネントと併用して、ユーザーが何を入力すべきかを示すラベルを設定してください。FormControlと併用することで、支援技術にも入力の目的が伝達されます。

eslint-plugin-smarthrのsmarthr/a11y-input-in-form-control別タブで開くルールは、WarekiPickerにFormControlを組み合わせることを促すものです。支援技術に入力の目的が伝わらないリスクを防ぐため、有効にして使用することを推奨します。

関連ページ

使い方チェックリスト

WarekiPicker
参照元：使用上の注意 > 和暦を西暦に変換できることを明示する 「使用上の注意 > 和暦を西暦に変換できることを明示する」の本文へ移動
  • Must
    和暦変換できることをラベルや説明文を使って明示する

Props

disabled
false true

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

name
string

input 要素の name 属性の値

placeholder
string

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

value
string

input 要素の value 属性の値

width
string number

コンポーネントの幅

onChange
(e: ChangeEvent<HTMLInputElement>, other: { date: Date; formatValue: string; errors: string[]; }) => void

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

from
Date

選択可能な期間の開始日

to
Date

選択可能な期間の終了日

error
false true

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

parseInput
(input: string) => Date

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

formatDate
(date: Date) => string

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

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

@deprecated onChangeDate は非推奨です。onChange を使ってください。