DatePicker
DatePicker
は、ユーザーが日付を選択するために使用されるコンポーネントです。
インポート
@yamada-ui/calendar
は、@yamada-ui/react
に含まれていないため、別途インストールする必要があります。
import { DatePicker } from "@yamada-ui/calendar"
使い方
編集可能な例
<DatePicker placeholder="basic" />
バリアントを変更する
編集可能な例
<VStack> <DatePicker variant="outline" placeholder="outline" /> <DatePicker variant="filled" placeholder="filled" /> <DatePicker variant="flushed" placeholder="flushed" /> <DatePicker variant="unstyled" placeholder="unstyled" /> </VStack>
カレンダーのバリアントを変更する場合は、variant
を設定します。
編集可能な例
<VStack> <DatePicker placeholder="solid" calendarVariant="solid" /> <DatePicker placeholder="subtle" calendarVariant="subtle" /> </VStack>
サイズを変更する
編集可能な例
<VStack> <DatePicker placeholder="extra small size" size="xs" /> <DatePicker placeholder="small size" size="sm" /> <DatePicker placeholder="medium size" size="md" /> <DatePicker placeholder="large size" size="lg" /> </VStack>
カレンダーのサイズを変更する場合は、calendarSize
を設定します。
編集可能な例
<VStack> <DatePicker placeholder="small size" calendarSize="sm" /> <DatePicker placeholder="medium size" calendarSize="md" /> <DatePicker placeholder="large size" calendarSize="lg" /> </VStack>
カラースキーマを変更する
編集可能な例
<VStack> <DatePicker calendarVariant="solid" calendarColorScheme="secondary" today defaultValue={new Date(new Date().setDate(1))} /> <DatePicker calendarVariant="subtle" calendarColorScheme="green" today defaultValue={new Date(new Date().setDate(1))} /> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValue
にDate
を設定します。
編集可能な例
<DatePicker defaultValue={new Date()} />
デフォルトのタイプを変更する
デフォルトのタイプを変更する場合は、defaultType
にdate
やmonth
を設定します。デフォルトでは、date
が設定されています。
編集可能な例
<VStack> <DatePicker placeholder="date" defaultType="date" /> <DatePicker placeholder="month" defaultType="month" /> <DatePicker placeholder="year" defaultType="year" /> </VStack>
デフォルトの月を設定する
デフォルトの月を設定する場合は、defaultMonth
にDate
を設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" defaultMonth={new Date("1993-08-18")} />
週の最初の日を変更する
週の最初の日を変更する場合は、firstDayOfWeek
をmonday
またはsunday
を設定します。デフォルトでは、monday
が設定されています。
編集可能な例
<VStack> <DatePicker placeholder="monday" firstDayOfWeek="monday" /> <DatePicker placeholder="sunday" firstDayOfWeek="sunday" /> </VStack>
パターンを設定する
パターンを設定する場合は、pattern
に正規表現を設定します。デフォルトでは、'/[^0-9\-\/]/g'
が設定されています。
編集可能な例
<DatePicker placeholder="MMMM D, YYYY" inputFormat="MMMM D, YYYY" pattern={/[^\w, ]/g} defaultValue={new Date()} />
入力された値の解析をハンドルする
入力された値の解析をハンドルする場合は、parseDate
を使用します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" inputFormat="YYYY/MM/DD" parseDate={(value) => new Date(value)} />
最小と最大の日付を設定する
選択可能な最小と最大の日付を設定する場合は、minDate
とmaxDate
にDate
を設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" minDate={new Date(new Date().setDate(1))} maxDate={new Date(new Date().setDate(18))} />
最小と最大の範囲外を許可する
デフォルトでは、最小と最大の日付の範囲外が入力された場合、自動的に最小または最大の日付に置換されます。この制御を無効にし、最小と最大の範囲外を許可する場合は、allowInputBeyond
をtrue
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" minDate={new Date(new Date().setDate(1))} maxDate={new Date(new Date().setDate(18))} allowInputBeyond />
今日の日付を強調表示する
今日の日付を強調表示する場合は、today
をtrue
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" today />
週末の日を設定する
週末の日を設定する場合は、weekendDays
に数値の配列を設定します。デフォルトでは、[0, 6]
が設定されています。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" weekendDays={[0, 1]} />
祝日を設定する
祝日を設定する場合は、holidays
にDate
の配列を設定します。
編集可能な例
const holidays = [ new Date("2023-01-01"), new Date("2023-01-02"), new Date("2023-01-09"), new Date("2023-02-11"), new Date("2023-02-23"), new Date("2023-03-21"), new Date("2023-04-29"), new Date("2023-05-03"), new Date("2023-05-04"), new Date("2023-05-05"), new Date("2023-07-17"), new Date("2023-08-11"), new Date("2023-09-18"), new Date("2023-09-23"), new Date("2023-10-09"), new Date("2023-11-03"), new Date("2023-11-23"), new Date("2024-01-01"), new Date("2024-01-08"), new Date("2024-02-11"), new Date("2024-02-12"), new Date("2024-02-23"), new Date("2024-03-20"), new Date("2024-04-29"), new Date("2024-05-03"), new Date("2024-05-04"), new Date("2024-05-05"), new Date("2024-05-06"), new Date("2024-07-15"), new Date("2024-08-11"), new Date("2024-08-12"), new Date("2024-09-16"), new Date("2024-09-22"), new Date("2024-09-23"), new Date("2024-10-14"), new Date("2024-11-03"), new Date("2024-11-04"), new Date("2024-11-23"), ] return <DatePicker placeholder="YYYY/MM/DD" holidays={holidays} />
特定の日付を除外する
特定の日付を除外する場合は、excludeDate
を使用します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6} />
ロケールを設定する
ロケールを設定する場合は、データをインポートして、locale
に対象のロケールを設定します。
import "dayjs/locale/ja"
編集可能な例
<DatePicker locale="ja" placeholder="YYYY/MM/DD" />
ロケールについては、こちらをご覧ください。
日付のフォーマットを変更する
日付のフォーマットを変更する場合は、inputFormat
やyearFormat
に文字列を設定します。
編集可能な例
<VStack> <DatePicker placeholder="YYYY-MM-DD" inputFormat="YYYY-MM-DD" /> <DatePicker placeholder="YYYY/MM/DD" locale="ja" dateFormat="YYYY年 MMMM" /> <DatePicker placeholder="YYYY/MM/DD" locale="ja" defaultType="month" yearFormat="YYYY年" /> <DatePicker placeholder="YYYY/MM/DD" locale="ja" defaultType="month" monthFormat="MM" /> <DatePicker placeholder="YYYY/MM/DD" locale="ja" defaultType="year" yearFormat="YY" /> <DatePicker placeholder="YYYY/MM/DD" locale="ja" weekdayFormat="dd曜" /> </VStack>
フォーマットについては、こちらをご覧ください。
表示する月の数を変更する
表示する月の数を変更する場合は、amountOfMonths
に数値を設定します。
編集可能な例
<VStack> <DatePicker placeholder="YYYY/MM/DD" amountOfMonths={1} disableOutsideDays /> <DatePicker placeholder="YYYY/MM/DD" amountOfMonths={2} disableOutsideDays /> <DatePicker placeholder="YYYY/MM/DD" amountOfMonths={3} disableOutsideDays /> </VStack>
ページネーションの単位を変更する
ページネーションの単位を変更する場合は、paginateBy
に数値を設定します。デフォルトでは、amountOfMonths
と同じ数値が設定されるようになっています。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" amountOfMonths={2} disableOutsideDays paginateBy={1} />
選択時にカレンダーを閉じない
デフォルトでは、選択時に自動的にカレンダーを閉じます。選択時にカレンダーを閉じないようにする場合は、closeOnSelect
をfalse
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" closeOnSelect={false} />
ブラー時にカレンダーを閉じない
デフォルトでは、ブラー時に自動的にカレンダーを閉じます。ブラー時にカレンダーを閉じないようにする場合は、closeOnBlur
をfalse
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" closeOnBlur={false} />
クリアを無効化する
クリアを無効化する場合は、isClearable
をfalse
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" isClearable={false} />
入力を許可しない
入力を許可しない場合は、allowInput
をfalse
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" allowInput={false} />
当月外の日付を無効にする
当月外の日付を無効にする場合は、disableOutsideDays
をtrue
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" disableOutsideDays />
当月外の日付を非表示にする
当月外の日付を非表示にする場合は、hiddenOutsideDays
をtrue
に設定します。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" hiddenOutsideDays />
表示位置を変更する
表示位置を変更するには、placement
にtop
やleft-start
などを設定します。デフォルトでは、bottom
が設定されています。
編集可能な例
<DatePicker placeholder="YYYY/MM/DD" placement="bottom-end" />
オフセットを変更する
要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutter
またはoffset
で位置を調整します。
gutter
は、単純な要素との差を設定でき、offset
は、[横軸, 縦軸]
を設定できます。
編集可能な例
<VStack> <DatePicker placeholder="YYYY/MM/DD" gutter={32} /> <DatePicker placeholder="YYYY/MM/DD" offset={[16, 16]} /> </VStack>
ボーダーのカラーを変更する
ボーダーのカラーを変更する場合は、focusBorderColor
またはerrorBorderColor
にカラーを設定します。
編集可能な例
<VStack> <DatePicker focusBorderColor="green.500" placeholder="custom border color" /> <DatePicker isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
無効化する
無効化する場合は、isDisabled
をtrue
に設定します。
編集可能な例
<VStack> <DatePicker isDisabled variant="outline" placeholder="outline" /> <DatePicker isDisabled variant="filled" placeholder="filled" /> <DatePicker isDisabled variant="flushed" placeholder="flushed" /> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnly
をtrue
に設定します。
編集可能な例
<VStack> <DatePicker isReadOnly variant="outline" placeholder="outline" /> <DatePicker isReadOnly variant="filled" placeholder="filled" /> <DatePicker isReadOnly variant="flushed" placeholder="flushed" /> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalid
をtrue
に設定します。
編集可能な例
<VStack> <DatePicker isInvalid variant="outline" placeholder="outline" /> <DatePicker isInvalid variant="filled" placeholder="filled" /> <DatePicker isInvalid variant="flushed" placeholder="flushed" /> </VStack>
アイコンをカスタマイズする
アイコンをカスタマイズする場合は、iconProps
にprops
を設定します。
編集可能な例
<VStack> <DatePicker placeholder="YYYY/MM/DD" iconProps={{ color: "primary" }} /> <DatePicker placeholder="YYYY/MM/DD" iconProps={{ children: <GhostIcon /> }} /> </VStack>
ドロップダウンに要素を追加する
ドロップダウンに要素を追加する場合は、children
に要素を設定します。
children
には、value
とonClose
のメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。
編集可能な例
<VStack> <DatePicker placeholder="YYYY/MM/DD"> <VStack mt="sm"> <Button>Submit</Button> </VStack> </DatePicker> <DatePicker placeholder="YYYY/MM/DD" closeOnSelect={false}> {({ value, onClose }) => ( <VStack mt="sm"> <Button isDisabled={!value} onClick={onClose}> Submit{value ? ` ${new Date(value).toLocaleDateString("en-CA")}` : ""} </Button> </VStack> )} </DatePicker> </VStack>
制御する
編集可能な例
const [value, onChange] = useState<Date | null>(new Date()) return <DatePicker placeholder="YYYY/MM/DD" value={value} onChange={onChange} />
編集可能な例
const [type, onChangeType] = useState<DatePickerProps["type"]>("month") return ( <DatePicker placeholder="YYYY/MM/DD" type={type} onChangeType={onChangeType} /> )
編集可能な例
const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18")) return ( <DatePicker placeholder="YYYY/MM/DD" month={month} onChangeMonth={onChangeMonth} /> )
React Hook Form
を使う
編集可能な例
type Data = { datePicker: 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.datePicker} label="Birthday" errorMessage={errors.datePicker ? errors.datePicker.message : undefined} > <Controller name="datePicker" control={control} rules={{ required: { value: true, message: "This is required." } }} render={({ field }) => ( <DatePicker placeholder="YYYY/MM/DD" {...field} /> )} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する