Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

RangeDatePicker

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

ソース@yamada-ui/calendar

インポート

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

使い方

編集可能な例

<RangeDatePicker placeholder="YYYY/MM/DD" />
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <RangeDatePicker variant="outline" placeholder="YYYY/MM/DD" />
  <RangeDatePicker variant="filled" placeholder="YYYY/MM/DD" />
  <RangeDatePicker variant="flushed" placeholder="YYYY/MM/DD" />
  <RangeDatePicker variant="unstyled" placeholder="YYYY/MM/DD" />
</VStack>
Copied!

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

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY/MM/DD" calendarVariant="solid" />
  <RangeDatePicker placeholder="YYYY/MM/DD" calendarVariant="subtle" />
</VStack>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY/MM/DD" size="xs" />
  <RangeDatePicker placeholder="YYYY/MM/DD" size="sm" />
  <RangeDatePicker placeholder="YYYY/MM/DD" size="md" />
  <RangeDatePicker placeholder="YYYY/MM/DD" size="lg" />
</VStack>
Copied!

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

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY/MM/DD" calendarSize="sm" />
  <RangeDatePicker placeholder="YYYY/MM/DD" calendarSize="md" />
  <RangeDatePicker placeholder="YYYY/MM/DD" calendarSize="lg" />
</VStack>
Copied!

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

編集可能な例

<VStack>
  <RangeDatePicker
    calendarVariant="solid"
    calendarColorScheme="secondary"
    today
    defaultValue={[
      new Date(new Date().setDate(5)),
      new Date(new Date().setDate(10)),
    ]}
  />
  <RangeDatePicker
    calendarVariant="subtle"
    calendarColorScheme="green"
    today
    defaultValue={[
      new Date(new Date().setDate(5)),
      new Date(new Date().setDate(10)),
    ]}
  />
</VStack>
Copied!

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

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

編集可能な例

<RangeDatePicker
  defaultValue={[
    new Date(new Date().setDate(5)),
    new Date(new Date().setDate(10)),
  ]}
/>
Copied!

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

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

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY/MM/DD" defaultType="date" />
  <RangeDatePicker placeholder="YYYY/MM/DD" defaultType="month" />
  <RangeDatePicker placeholder="YYYY/MM/DD" defaultType="year" />
</VStack>
Copied!

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

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

編集可能な例

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

週の最初の日を変更する

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

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY/MM/DD" firstDayOfWeek="monday" />
  <RangeDatePicker placeholder="YYYY/MM/DD" firstDayOfWeek="sunday" />
</VStack>
Copied!

パターンを設定する

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

編集可能な例

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

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

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

編集可能な例

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

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

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

編集可能な例

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

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

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

編集可能な例

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

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

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

編集可能な例

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

週末の日を設定する

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

編集可能な例

<RangeDatePicker 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 <RangeDatePicker placeholder="YYYY/MM/DD" holidays={holidays} />
Copied!

特定の日付を除外する

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

編集可能な例

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

ロケールを設定する

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

import "dayjs/locale/ja"
Copied!

編集可能な例

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

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

日付のフォーマットを変更する場合は、inputFormatやyearFormatに文字列を設定します。

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY-MM-DD" inputFormat="YYYY-MM-DD" />
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    locale="ja"
    dateFormat="YYYY年 MMMM"
  />
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    locale="ja"
    defaultType="month"
    yearFormat="YYYY年"
  />
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    locale="ja"
    defaultType="month"
    monthFormat="MM"
  />
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    locale="ja"
    defaultType="year"
    yearFormat="YY"
  />
  <RangeDatePicker placeholder="YYYY/MM/DD" locale="ja" weekdayFormat="dd曜" />
</VStack>
Copied!

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

表示する月の数を変更する場合は、amountOfMonthsに数値を設定します。

編集可能な例

<VStack>
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    amountOfMonths={1}
    disableOutsideDays
  />
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    amountOfMonths={2}
    disableOutsideDays
  />
  <RangeDatePicker
    placeholder="YYYY/MM/DD"
    amountOfMonths={3}
    disableOutsideDays
  />
</VStack>
Copied!

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

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

編集可能な例

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

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

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

編集可能な例

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

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

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

編集可能な例

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

クリアを無効化する

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

編集可能な例

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

入力を許可しない

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

編集可能な例

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

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

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

編集可能な例

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

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

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

編集可能な例

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

表示位置を変更する

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

編集可能な例

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

オフセットを変更する

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

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

編集可能な例

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

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

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

編集可能な例

<VStack>
  <RangeDatePicker focusBorderColor="green.500" placeholder="YYYY/MM/DD" />
  <RangeDatePicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="YYYY/MM/DD"
  />
</VStack>
Copied!

区切りをカスタマイズする

区切りをカスタマイズする場合は、separatorに文字列を設定します。

編集可能な例

<RangeDatePicker placeholder="YYYY/MM/DD" separator="~" />
Copied!

範囲可能な最大数を設定する

範囲可能な最大数を設定する場合は、maxSelectValuesに数値を設定します。

編集可能な例

<RangeDatePicker maxSelectValues={3} placeholder="YYYY/MM/DD" />
Copied!

無効化する

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

編集可能な例

<VStack>
  <RangeDatePicker isDisabled variant="outline" placeholder="YYYY/MM/DD" />
  <RangeDatePicker isDisabled variant="filled" placeholder="YYYY/MM/DD" />
  <RangeDatePicker isDisabled variant="flushed" placeholder="YYYY/MM/DD" />
</VStack>
Copied!

読み取り専用にする

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

編集可能な例

<VStack>
  <RangeDatePicker isReadOnly variant="outline" placeholder="YYYY/MM/DD" />
  <RangeDatePicker isReadOnly variant="filled" placeholder="YYYY/MM/DD" />
  <RangeDatePicker isReadOnly variant="flushed" placeholder="YYYY/MM/DD" />
</VStack>
Copied!

無効な入力にする

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

編集可能な例

<VStack>
  <RangeDatePicker isInvalid variant="outline" placeholder="YYYY/MM/DD" />
  <RangeDatePicker isInvalid variant="filled" placeholder="YYYY/MM/DD" />
  <RangeDatePicker isInvalid variant="flushed" placeholder="YYYY/MM/DD" />
</VStack>
Copied!

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

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

編集可能な例

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

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

ドロップダウンに要素を追加する場合は、childrenに要素を設定します。
childrenには、valueとonCloseのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。

編集可能な例

<VStack>
  <RangeDatePicker placeholder="YYYY/MM/DD">
    <VStack mt="sm">
      <Button>Submit</Button>
    </VStack>
  </RangeDatePicker>

  <RangeDatePicker placeholder="YYYY/MM/DD" closeOnSelect={false}>
    {({ value, onClose }) => (
      <VStack mt="sm">
        <Button isDisabled={!value} onClick={onClose}>
          Submit
          {value[0]
            ? ` ${String(value[0].getMonth() + 1).padStart(2, "0")}/${String(value[0].getDate()).padStart(2, "0")} -`
            : ""}
          {value[1]
            ? ` ${String(value[1].getMonth() + 1).padStart(2, "0")}/${String(value[1].getDate()).padStart(2, "0")}`
            : ""}
        </Button>
      </VStack>
    )}
  </RangeDatePicker>
</VStack>
Copied!

制御する

編集可能な例

const [value, onChange] = useState<[Date?, Date?]>([])

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

編集可能な例

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

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

編集可能な例

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

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

React Hook Formを使う

編集可能な例

type Data = { rangeDatePicker: [Date?, Date?] }

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.rangeDatePicker}
      label="Date to reserve"
      errorMessage={
        errors.rangeDatePicker ? errors.rangeDatePicker.message : undefined
      }
    >
      <Controller
        name="rangeDatePicker"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <RangeDatePicker placeholder="YYYY/MM/DD" {...field} />
        )}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

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

前MultiDatePicker次TimePicker