Stats
Actions
Tags
Provides context and instructions for the deprecated DatePicker component from smarthr-ui. Recommends migration to Input[type=date] and documents props and usage.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-date-pickerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> ⚠️ **非推奨**: DatePickerは非推奨です。Input[type=date] を使ってください。
⚠️ 非推奨: DatePickerは非推奨です。Input[type=date] を使ってください。
ユーザーに日付を指定させる際に使用するコンポーネントです。フォーカスするとCalendarが開き、視覚的に日付を選択できます。
ユーザーに日付を指定させる際に使用するコンポーネントです。フォーカスするとCalendarが開き、視覚的に日付を選択できます。
import { DatePicker } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| disabled | boolean | - | - | フォームを無効にするかどうか |
| name | string | - | - | input 要素の name 属性の値 |
| placeholder | string | - | - | placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。 |
| value | string | - | - | input 要素の value 属性の値 |
| width | string | number | - | - | コンポーネントの幅 |
| onChange | (e: ChangeEvent, other: { date: Date; formatValue: string; errors: string[]; }) => void | - | - | 選択された日付が変わった時に発火するコールバック関数 |
| from | Date | new Date(1900, 0, 1) | - | 選択可能な期間の開始日 |
| to | Date | - | - | 選択可能な期間の終了日 |
| error | boolean | - | - | フォームにエラーがあるかどうか |
| parseInput | (input: string) => Date | - | - | 入力を独自にパースする場合に、パース処理を記述する関数 |
| formatDate | (date: Date) => string | - | - | 表示する日付を独自にフォーマットする場合に、フォーマット処理を記述する関数 |
| showAlternative | (date: Date) => ReactNode | - | - | 入出力用文字列と併記する別フォーマット処理を記述する関数 |
| onChangeDate | (date: Date, value: string, other: { errors: string[]; }) => void | - | - | @deprecated onChangeDate は非推奨です。onChange を使ってください。 |
DatePicker に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト（Layer 3）は設定されていません。
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-system【非推奨】Provides deprecated DatetimeLocalPicker component for date+time input. Guides migration to Input[type="datetime-local"].
Sets up MUI X Date/Time Pickers in React apps with adapters like dayjs, date-fns; configures DatePicker, TimePicker, DateTimePicker components.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.