YearPicker
YearPickerは、ユーザーが年を選択するために使用されるコンポーネントです。
インポート
@yamada-ui/calendarは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
import { YearPicker } from "@yamada-ui/calendar"
使い方
編集可能な例
<YearPicker placeholder="basic" />
バリアントを変更する
編集可能な例
<VStack> <YearPicker variant="outline" placeholder="outline" /> <YearPicker variant="filled" placeholder="filled" /> <YearPicker variant="flushed" placeholder="flushed" /> <YearPicker variant="unstyled" placeholder="unstyled" /> </VStack>
カレンダーのバリアントを変更する場合は、variantを設定します。
編集可能な例
<VStack> <YearPicker placeholder="solid" calendarVariant="solid" /> <YearPicker placeholder="subtle" calendarVariant="subtle" /> </VStack>
サイズを変更する
編集可能な例
<VStack> <YearPicker placeholder="extra small size" size="xs" /> <YearPicker placeholder="small size" size="sm" /> <YearPicker placeholder="medium size" size="md" /> <YearPicker placeholder="large size" size="lg" /> </VStack>
カレンダーのサイズを変更する場合は、calendarSizeを設定します。
編集可能な例
<VStack> <YearPicker placeholder="small size" calendarSize="sm" /> <YearPicker placeholder="medium size" calendarSize="md" /> <YearPicker placeholder="large size" calendarSize="lg" /> </VStack>
カラースキーマを変更する
編集可能な例
<VStack> <YearPicker calendarVariant="solid" calendarColorScheme="secondary" today defaultValue={new Date(new Date().setDate(1))} /> <YearPicker calendarVariant="subtle" calendarColorScheme="green" today defaultValue={new Date(new Date().setDate(1))} /> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValueにDateを設定します。
編集可能な例
<YearPicker defaultValue={new Date()} placeholder="YYYY" />
パターンを設定する
パターンを設定する場合は、patternに正規表現を設定します。デフォルトでは、'/[^0-9\-\/]/g'が設定されています。
編集可能な例
<YearPicker pattern={/[^\w, ]/g} defaultValue={new Date()} />
日付の解析
日付の解析方法をカスタマイズすることができます。
編集可能な例
<YearPicker placeholder="YYYY" parseDate={(value) => new Date(value)} />
最小と最大の年を設定する
選択可能な最小と最大の年を設定する場合は、minDateとmaxDateにDateを設定します。
編集可能な例
<YearPicker placeholder="YYYY" defaultValue={new Date(1997, 0)} minDate={new Date(1993, 0)} maxDate={new Date(2000, 0)} />
ロケールを設定する
ロケールを設定する場合は、データをインポートして、localeに対象のロケールを設定します。
import "dayjs/locale/ja"
編集可能な例
<YearPicker locale="ja" placeholder="YYYY" />
ロケールについては、こちらをご覧ください。
年のフォーマットを変更する
年のフォーマットを変更する場合は、inputFormatやyearFormatに文字列を設定します。
編集可能な例
<YearPicker placeholder="YY" inputFormat="YY" yearFormat="YY" />
フォーマットについては、こちらをご覧ください。
選択時にカレンダーを閉じない
デフォルトでは、選択時に自動的にカレンダーを閉じます。選択時にカレンダーを閉じないようにする場合は、closeOnSelectをfalseに設定します。
編集可能な例
<YearPicker placeholder="YYYY" closeOnSelect={false} />
ブラー時にカレンダーを閉じない
デフォルトでは、ブラー時に自動的にカレンダーを閉じます。ブラー時にカレンダーを閉じないようにする場合は、closeOnBlurをfalseに設定します。
編集可能な例
<YearPicker placeholder="YYYY" closeOnBlur={false} />
クリアを無効化する
クリアを無効化する場合は、isClearableをfalseに設定します。
編集可能な例
<YearPicker placeholder="YYYY" isClearable={false} />
入力を許可しない
入力を許可しない場合は、allowInputをfalseに設定します。
編集可能な例
<YearPicker placeholder="YYYY" allowInput={false} />
表示位置を変更する
表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。
編集可能な例
<YearPicker placeholder="YYYY" placement="bottom-end" />
オフセットを変更する
要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。
gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。
編集可能な例
<VStack> <YearPicker placeholder="YYYY" gutter={32} /> <YearPicker placeholder="YYYY" offset={[16, 16]} /> </VStack>
ボーダーのカラーを変更する
ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。
編集可能な例
<VStack> <YearPicker focusBorderColor="green.500" placeholder="custom border color" /> <YearPicker isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
無効化する
無効化する場合は、isDisabledをtrueに設定します。
編集可能な例
<VStack> <YearPicker isDisabled variant="outline" placeholder="outline" /> <YearPicker isDisabled variant="filled" placeholder="filled" /> <YearPicker isDisabled variant="flushed" placeholder="flushed" /> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
<VStack> <YearPicker isReadOnly variant="outline" placeholder="outline" /> <YearPicker isReadOnly variant="filled" placeholder="filled" /> <YearPicker isReadOnly variant="flushed" placeholder="flushed" /> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalidをtrueに設定します。
編集可能な例
<VStack> <YearPicker isInvalid variant="outline" placeholder="outline" /> <YearPicker isInvalid variant="filled" placeholder="filled" /> <YearPicker isInvalid variant="flushed" placeholder="flushed" /> </VStack>
アイコンをカスタマイズする
アイコンをカスタマイズする場合は、iconPropsにpropsを設定します。
編集可能な例
<VStack> <YearPicker placeholder="YYYY" iconProps={{ color: "primary" }} /> <YearPicker placeholder="YYYY" iconProps={{ children: <GhostIcon /> }} /> </VStack>
ドロップダウンに要素を追加する
ドロップダウンに要素を追加する場合は、childrenに要素を設定します。
childrenには、valueとonCloseのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。
編集可能な例
<VStack> <YearPicker placeholder="YYYY"> <VStack mt="sm"> <Button>Submit</Button> </VStack> </YearPicker> <YearPicker placeholder="YYYY" closeOnSelect={false}> {({ value, onClose }) => ( <VStack mt="sm"> <Button isDisabled={!value} onClick={onClose}> Submit {value ? ` ${value.getFullYear()}` : ""} </Button> </VStack> )} </YearPicker> </VStack>
制御する
編集可能な例
const [value, onChange] = useState<Date | null>(new Date()) return <YearPicker placeholder="YYYY" value={value} onChange={onChange} />
React Hook Formを使う
編集可能な例
type Data = { yearPicker: Date | null } const { control, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.yearPicker} label="Birthday" errorMessage={errors.yearPicker ? errors.yearPicker.message : undefined} > <Controller name="yearPicker" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => <YearPicker placeholder="YYYY" {...field} />} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する