MultiDatePicker

MultiDatePicker is a component used for users to select multiple dates.

Import

@yamada-ui/calendar is not included in @yamada-ui/react, so it needs to be installed separately.

import { MultiDatePicker } from "@yamada-ui/calendar"

Copied!

Usage

Editable example

<MultiDatePicker placeholder="basic" />

Copied!

Change Variant

Editable example

<VStack>
  <MultiDatePicker variant="outline" placeholder="outline" />
  <MultiDatePicker variant="filled" placeholder="filled" />
  <MultiDatePicker variant="flushed" placeholder="flushed" />
  <MultiDatePicker variant="unstyled" placeholder="unstyled" />
</VStack>

Copied!

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

Editable example

<VStack>
  <MultiDatePicker placeholder="solid" calendarVariant="solid" />
  <MultiDatePicker placeholder="subtle" calendarVariant="subtle" />
</VStack>

Copied!

Change Size

Editable example

<VStack>
  <MultiDatePicker placeholder="extra small size" size="xs" />
  <MultiDatePicker placeholder="small size" size="sm" />
  <MultiDatePicker placeholder="medium size" size="md" />
  <MultiDatePicker placeholder="large size" size="lg" />
</VStack>

Copied!

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

Editable example

<VStack>
  <MultiDatePicker placeholder="small size" calendarSize="sm" />
  <MultiDatePicker placeholder="medium size" calendarSize="md" />
  <MultiDatePicker placeholder="large size" calendarSize="lg" />
</VStack>

Copied!

Change Color Scheme

Editable example

<VStack>
  <MultiDatePicker
    calendarVariant="solid"
    calendarColorScheme="secondary"
    today
    defaultValue={[new Date(new Date().setDate(1))]}
  />
  <MultiDatePicker
    calendarVariant="subtle"
    calendarColorScheme="green"
    today
    defaultValue={[new Date(new Date().setDate(1))]}
  />
</VStack>

Copied!

Set Default Values

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

Editable example

<MultiDatePicker defaultValue={[new Date()]} />

Copied!

Change Default Type

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

Editable example

<VStack>
  <MultiDatePicker placeholder="date" defaultType="date" />
  <MultiDatePicker placeholder="month" defaultType="month" />
  <MultiDatePicker placeholder="year" defaultType="year" />
</VStack>

Copied!

Set Default Month

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

Editable example

<MultiDatePicker
  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>
  <MultiDatePicker placeholder="monday" firstDayOfWeek="monday" />
  <MultiDatePicker placeholder="sunday" 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

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

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

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

Copied!

Allow Beyond Minimum and Maximum Range

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

Editable example

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

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

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

Copied!

Exclude Specific Dates

To exclude specific dates, use excludeDate.

Editable example

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

<MultiDatePicker locale="ja" placeholder="YYYY/MM/DD" />

Copied!

For information about locales, please check here.

Change Date Format

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

Editable example

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

Copied!

For information about formats, please check here.

Change the Number of Months Displayed

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

Editable example

<VStack>
  <MultiDatePicker
    placeholder="YYYY/MM/DD"
    amountOfMonths={1}
    disableOutsideDays
  />
  <MultiDatePicker
    placeholder="YYYY/MM/DD"
    amountOfMonths={2}
    disableOutsideDays
  />
  <MultiDatePicker
    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

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

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

<MultiDatePicker placeholder="YYYY/MM/DD" closeOnBlur={false} />

Copied!

Disable Clearing

To disable clearing, set isClearable to false.

Editable example

<MultiDatePicker placeholder="YYYY/MM/DD" isClearable={false} />

Copied!

Disallow Input

To disallow input, set allowInput to false.

Editable example

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

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

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

<MultiDatePicker 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>
  <MultiDatePicker placeholder="YYYY/MM/DD" gutter={32} />
  <MultiDatePicker 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>
  <MultiDatePicker
    focusBorderColor="green.500"
    placeholder="custom border color"
  />
  <MultiDatePicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>

Copied!

Customize Separator

To customize the separator, set a string to separator.

Editable example

<MultiDatePicker placeholder="YYYY/MM/DD" separator=";" />

Copied!

Always Show Placeholder

To always show the placeholder, set keepPlaceholder to true.

Editable example

<MultiDatePicker placeholder="YYYY/MM/DD" keepPlaceholder />

Copied!

Use Custom Component

To use a custom component, set a ReactElement to component. component provides value, label, index, onRemove.

Editable example

<VStack>
  <MultiDatePicker
    placeholder="YYYY/MM/DD"
    component={({ label }) => <Tag>{label}</Tag>}
  />

  <MultiDatePicker
    placeholder="YYYY/MM/DD"
    component={({ label, onRemove }) => <Tag onClose={onRemove}>{label}</Tag>}
  />
</VStack>

Copied!

Set Maximum Number of Selectable Values

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

Editable example

<MultiDatePicker maxSelectValues={3} placeholder="YYYY/MM/DD" />

Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack>
  <MultiDatePicker isDisabled variant="outline" placeholder="outline" />
  <MultiDatePicker isDisabled variant="filled" placeholder="filled" />
  <MultiDatePicker isDisabled variant="flushed" placeholder="flushed" />
</VStack>

Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack>
  <MultiDatePicker isReadOnly variant="outline" placeholder="outline" />
  <MultiDatePicker isReadOnly variant="filled" placeholder="filled" />
  <MultiDatePicker isReadOnly variant="flushed" placeholder="flushed" />
</VStack>

Copied!

Make Input Invalid

To make input invalid, set isInvalid to true.

Editable example

<VStack>
  <MultiDatePicker isInvalid variant="outline" placeholder="outline" />
  <MultiDatePicker isInvalid variant="filled" placeholder="filled" />
  <MultiDatePicker isInvalid variant="flushed" placeholder="flushed" />
</VStack>

Copied!

Customize Icon

To customize the icon, set props to iconProps.

Editable example

<VStack>
  <MultiDatePicker placeholder="YYYY/MM/DD" iconProps={{ color: "primary" }} />
  <MultiDatePicker
    placeholder="YYYY/MM/DD"
    iconProps={{ children: <GhostIcon /> }}
  />
</VStack>

Copied!

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>
  <MultiDatePicker placeholder="YYYY/MM/DD">
    <VStack mt="sm">
      <Button>Submit</Button>
    </VStack>
  </MultiDatePicker>

  <MultiDatePicker placeholder="YYYY/MM/DD" closeOnSelect={false}>
    {({ value, onClose }) => (
      <VStack mt="sm">
        <Button isDisabled={!value} onClick={onClose}>
          Submit{value ? ` ${value.length} dates` : ""}
        </Button>
      </VStack>
    )}
  </MultiDatePicker>
</VStack>

Copied!

Control

Editable example

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

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

Copied!

Editable example

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

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

Copied!

Editable example

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

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

Copied!

Use `React Hook Form`

Editable example

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

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

Copied!

Edit this page on GitHub

PreviousDatePicker NextRangeDatePicker

MultiDatePicker

Usage

Change Variant

Change Size

Change Color Scheme

Set Default Values

Change Default Type

Set Default Month

Change First Day of the Week

Set Pattern

Handle Parsing of Entered Values

Set Minimum and Maximum Dates

Allow Beyond Minimum and Maximum Range

Highlight Today's Date

Set Weekend Days

Set Holidays

Exclude Specific Dates

Set Locale

Change Date Format

Change the Number of Months Displayed

Change Pagination Unit

Do Not Close Calendar on Blur

Disable Clearing

Disallow Input

Disable Dates Outside the Current Month

Hide Dates Outside the Current Month

Change Display Position

Change Offset

Change Border Color

Customize Separator

Always Show Placeholder

Use Custom Component

Set Maximum Number of Selectable Values

Disable

Make Read-Only

Make Input Invalid

Customize Icon

Add elements to a dropdown

Control

Use React Hook Form

Use `React Hook Form`