Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

DatePicker

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

ソース@yamada-ui/calendar

インポート

import { DatePicker } from "@yamada-ui/calendar"
Copied!

使い方

編集可能な例

<DatePicker placeholder="basic" />
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <DatePicker variant="outline" placeholder="outline" />
  <DatePicker variant="filled" placeholder="filled" />
  <DatePicker variant="flushed" placeholder="flushed" />
  <DatePicker variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

カレンダーのバリアントを変更する場合は、variantを設定します。

編集可能な例

<VStack>
  <DatePicker placeholder="solid" calendarVariant="solid" />
  <DatePicker placeholder="subtle" calendarVariant="subtle" />
</VStack>
Copied!

サイズを変更する

編集可能な例

<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>
Copied!

カレンダーのサイズを変更する場合は、calendarSizeを設定します。

編集可能な例

<VStack>
  <DatePicker placeholder="small size" calendarSize="sm" />
  <DatePicker placeholder="medium size" calendarSize="md" />
  <DatePicker placeholder="large size" calendarSize="lg" />
</VStack>
Copied!

カラースキーマを変更する

編集可能な例

<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>
Copied!

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueにDateを設定します。

編集可能な例

<DatePicker defaultValue={new Date()} />
Copied!

デフォルトのタイプを変更する

デフォルトのタイプを変更する場合は、defaultTypeにdateやmonthを設定します。デフォルトでは、dateが設定されています。

編集可能な例

<VStack>
  <DatePicker placeholder="date" defaultType="date" />
  <DatePicker placeholder="month" defaultType="month" />
  <DatePicker placeholder="year" defaultType="year" />
</VStack>
Copied!

デフォルトの月を設定する

デフォルトの月を設定する場合は、defaultMonthにDateを設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" defaultMonth={new Date("1993-08-18")} />
Copied!

週の最初の日を変更する

週の最初の日を変更する場合は、firstDayOfWeekをmondayまたはsundayを設定します。デフォルトでは、mondayが設定されています。

編集可能な例

<VStack>
  <DatePicker placeholder="monday" firstDayOfWeek="monday" />
  <DatePicker placeholder="sunday" firstDayOfWeek="sunday" />
</VStack>
Copied!

パターンを設定する

パターンを設定する場合は、patternに正規表現を設定します。デフォルトでは、'/[^0-9\-\/]/g'が設定されています。

編集可能な例

<DatePicker
  placeholder="MMMM D, YYYY"
  inputFormat="MMMM D, YYYY"
  pattern={/[^\w, ]/g}
  defaultValue={new Date()}
/>
Copied!

入力された値の解析をハンドルする

入力された値の解析をハンドルする場合は、parseDateを使用します。

編集可能な例

<DatePicker
  placeholder="YYYY/MM/DD"
  inputFormat="YYYY/MM/DD"
  parseDate={(value) => new Date(value)}
/>
Copied!

最小と最大の日付を設定する

選択可能な最小と最大の日付を設定する場合は、minDateとmaxDateにDateを設定します。

編集可能な例

<DatePicker
  placeholder="YYYY/MM/DD"
  minDate={new Date(new Date().setDate(1))}
  maxDate={new Date(new Date().setDate(18))}
/>
Copied!

最小と最大の範囲外を許可する

デフォルトでは、最小と最大の日付の範囲外が入力された場合、自動的に最小または最大の日付に置換されます。この制御を無効にし、最小と最大の範囲外を許可する場合は、allowInputBeyondをtrueに設定します。

編集可能な例

<DatePicker
  placeholder="YYYY/MM/DD"
  minDate={new Date(new Date().setDate(1))}
  maxDate={new Date(new Date().setDate(18))}
  allowInputBeyond
/>
Copied!

今日の日付を強調表示する

今日の日付を強調表示する場合は、todayをtrueに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" today />
Copied!

週末の日を設定する

週末の日を設定する場合は、weekendDaysに数値の配列を設定します。デフォルトでは、[0, 6]が設定されています。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" weekendDays={[0, 1]} />
Copied!

祝日を設定する

祝日を設定する場合は、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} />
Copied!

特定の日付を除外する

特定の日付を除外する場合は、excludeDateを使用します。

編集可能な例

<DatePicker
  placeholder="YYYY/MM/DD"
  excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>
Copied!

ロケールを設定する

ロケールを設定する場合は、データをインポートして、localeに対象のロケールを設定します。

import "dayjs/locale/ja"
Copied!

編集可能な例

<DatePicker locale="ja" placeholder="YYYY/MM/DD" />
Copied!

日付のフォーマットを変更する

日付のフォーマットを変更する場合は、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>
Copied!

表示する月の数を変更する

表示する月の数を変更する場合は、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>
Copied!

ページネーションの単位を変更する

ページネーションの単位を変更する場合は、paginateByに数値を設定します。デフォルトでは、amountOfMonthsと同じ数値が設定されるようになっています。

編集可能な例

<DatePicker
  placeholder="YYYY/MM/DD"
  amountOfMonths={2}
  disableOutsideDays
  paginateBy={1}
/>
Copied!

選択時にカレンダーを閉じない

デフォルトでは、選択時に自動的にカレンダーを閉じます。選択時にカレンダーを閉じないようにする場合は、closeOnSelectをfalseに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" closeOnSelect={false} />
Copied!

ブラー時にカレンダーを閉じない

デフォルトでは、ブラー時に自動的にカレンダーを閉じます。ブラー時にカレンダーを閉じないようにする場合は、closeOnBlurをfalseに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" closeOnBlur={false} />
Copied!

クリアを無効化する

クリアを無効化する場合は、isClearableをfalseに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" isClearable={false} />
Copied!

入力を許可しない

入力を許可しない場合は、allowInputをfalseに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" allowInput={false} />
Copied!

当月外の日付を無効にする

当月外の日付を無効にする場合は、disableOutsideDaysをtrueに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" disableOutsideDays />
Copied!

当月外の日付を非表示にする

当月外の日付を非表示にする場合は、hiddenOutsideDaysをtrueに設定します。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" hiddenOutsideDays />
Copied!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

<DatePicker placeholder="YYYY/MM/DD" placement="bottom-end" />
Copied!

オフセットを変更する

要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<VStack>
  <DatePicker placeholder="YYYY/MM/DD" gutter={32} />
  <DatePicker placeholder="YYYY/MM/DD" offset={[16, 16]} />
</VStack>
Copied!

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<VStack>
  <DatePicker focusBorderColor="green.500" placeholder="custom border color" />
  <DatePicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<VStack>
  <DatePicker isDisabled variant="outline" placeholder="outline" />
  <DatePicker isDisabled variant="filled" placeholder="filled" />
  <DatePicker isDisabled variant="flushed" placeholder="flushed" />
</VStack>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<VStack>
  <DatePicker isReadOnly variant="outline" placeholder="outline" />
  <DatePicker isReadOnly variant="filled" placeholder="filled" />
  <DatePicker isReadOnly variant="flushed" placeholder="flushed" />
</VStack>
Copied!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

<VStack>
  <DatePicker isInvalid variant="outline" placeholder="outline" />
  <DatePicker isInvalid variant="filled" placeholder="filled" />
  <DatePicker isInvalid variant="flushed" placeholder="flushed" />
</VStack>
Copied!

アイコンをカスタマイズする

アイコンをカスタマイズする場合は、iconPropsにpropsを設定します。

編集可能な例

<VStack>
  <DatePicker placeholder="YYYY/MM/DD" iconProps={{ color: "primary" }} />
  <DatePicker placeholder="YYYY/MM/DD" iconProps={{ children: <Ghost /> }} />
</VStack>
Copied!

ドロップダウンに要素を追加する

ドロップダウンに要素を追加する場合は、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>
Copied!

制御する

編集可能な例

const [value, onChange] = useState<Date | null>(new Date())

return <DatePicker placeholder="YYYY/MM/DD" value={value} onChange={onChange} />
Copied!

編集可能な例

const [type, onChangeType] = useState<DatePickerProps["type"]>("month")

return (
  <DatePicker
    placeholder="YYYY/MM/DD"
    type={type}
    onChangeType={onChangeType}
  />
)
Copied!

編集可能な例

const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18"))

return (
  <DatePicker
    placeholder="YYYY/MM/DD"
    month={month}
    onChangeMonth={onChangeMonth}
  />
)
Copied!

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>
)
Copied!

GitHubでこのページを編集する

前MultiAutocomplete次MultiDatePicker