Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

RangeDatePicker

RangeDatePicker is a component used for users to select a range of dates.

Source@yamada-ui/calendar

Import

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

Usage

Editable example

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

Change Variant

Editable example

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

To change the variant of the calendar, set the variant.

Editable example

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

Change Size

Editable example

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

To change the size of the calendar, set the calendarSize.

Editable example

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

Change Color Scheme

Editable example

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

Set Default Values

To set default values, set an array of Date to defaultValue.

Editable example

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

Change Default Type

To change the default type, set date or month to defaultType. By default, date is set.

Editable example

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

Set Default Month

To set the default month, set a Date to defaultMonth.

Editable example

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

Change First Day of the Week

To change the first day of the week, set firstDayOfWeek to monday or sunday. By default, monday is set.

Editable example

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

Set Pattern

To set a pattern, set a regular expression to pattern. By default, '/[^0-9\-\/]/g' is set.

Editable example

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

Handle Parsing of Entered Values

To handle the parsing of entered values, use parseDate.

Editable example

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

Set Minimum and Maximum Dates

To set the selectable minimum and maximum dates, set Date to minDate and maxDate.

Editable example

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

Allow Input Beyond Minimum and Maximum Range

By default, if a date outside the minimum and maximum range is entered, it is automatically replaced with the minimum or maximum date. To disable this control and allow input beyond the range, set allowInputBeyond to true.

Editable example

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

Highlight Today's Date

To highlight today's date, set today to true.

Editable example

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

Set Weekend Days

To set weekend days, set an array of numbers to weekendDays. By default, [0, 6] is set.

Editable example

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

Set Holidays

To set holidays, set an array of Date to holidays.

Editable example

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!

Exclude Specific Dates

To exclude specific dates, use excludeDate.

Editable example

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

Set Locale

To set the locale, import the data and set the target locale to locale.

import "dayjs/locale/ja"
Copied!

Editable example

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

Change Date Format

To change the date format, set a string to inputFormat or yearFormat.

Editable example

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

Change the Number of Months Displayed

To change the number of months displayed, set a number to amountOfMonths.

Editable example

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

Change Pagination Unit

To change the pagination unit, set a number to paginateBy. By default, the same number as amountOfMonths is set.

Editable example

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

Do Not Close Calendar on Selection

By default, the calendar automatically closes upon selection. To prevent the calendar from closing on selection, set closeOnSelect to false.

Editable example

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

Do Not Close Calendar on Blur

By default, the calendar automatically closes on blur. To prevent the calendar from closing on blur, set closeOnBlur to false.

Editable example

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

Disable Clearing

To disable clearing, set isClearable to false.

Editable example

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

Disallow Input

To disallow input, set allowInput to false.

Editable example

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

Disable Dates Outside the Current Month

To disable dates outside the current month, set disableOutsideDays to true.

Editable example

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

Hide Dates Outside the Current Month

To hide dates outside the current month, set hiddenOutsideDays to true.

Editable example

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

Change Display Position

To change the display position, set placement to top, left-start, etc. By default, bottom is set.

Editable example

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

Change Offset

Depending on the size of the element or the situation, you may want to change the position of the tooltip. In that case, adjust the position with gutter or offset.

gutter allows you to set the difference with simple elements, and offset allows you to set [horizontal, vertical].

Editable example

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

Change Border Color

To change the border color, set a color to focusBorderColor or errorBorderColor.

Editable example

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

Customize Separator

To customize the separator, set a string to separator.

Editable example

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

Set Maximum Range Values

To set the maximum number of range values, set a number to maxSelectValues.

Editable example

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

Disable

To disable, set isDisabled to true.

Editable example

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

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

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

Make Input Invalid

To make input invalid, set isInvalid to true.

Editable example

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

Customize Icons

To customize icons, set props to iconProps.

Editable example

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

Add elements to a dropdown

To add elements to a dropdown, set the elements to the children property.
The children are provided with value and onClose methods, which can be used to access the internal state.

Editable example

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

Control

Editable example

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

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

Editable example

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

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

Editable example

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

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

Use React Hook Form

Editable example

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="Birthday"
      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!

Edit this page on GitHub

PreviousRadioNextRangeSlider