DatePicker

DatePicker is a component used for users to select a date.

Import

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

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

Copied!

Usage

Editable example

<DatePicker placeholder="basic" />

Copied!

Change Variant

Editable example

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

Copied!

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

Editable example

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

Copied!

Change Size

Editable example

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

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

Editable example

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

Copied!

Change Color Scheme

Editable example

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

Set Default Value

To set a default value, set a Date to defaultValue.

Editable example

<DatePicker 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>
  <DatePicker placeholder="date" defaultType="date" />
  <DatePicker placeholder="month" defaultType="month" />
  <DatePicker placeholder="year" defaultType="year" />
</VStack>

Copied!

Set Default Month

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

Editable example

<DatePicker 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 either monday or sunday. By default, monday is set.

Editable example

<VStack>
  <DatePicker placeholder="monday" firstDayOfWeek="monday" />
  <DatePicker 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

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

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

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

Copied!

Allow Values Outside 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 values outside the range, set allowInputBeyond to true.

Editable example

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

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

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

Copied!

Exclude Specific Dates

To exclude specific dates, use excludeDate.

Editable example

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

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

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

Change Pagination Unit

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

Editable example

<DatePicker
  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 select, set closeOnSelect to false.

Editable example

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

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

Copied!

Disable Clearing

To disable clearing, set isClearable to false.

Editable example

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

Copied!

Disallow Input

To disallow input, set allowInput to false.

Editable example

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

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

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

<DatePicker 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 axis, vertical axis].

Editable example

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

Copied!

Disable

To disable, set isDisabled to true.

Editable example

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

Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

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

Copied!

Make Input Invalid

To make input invalid, set isInvalid to true.

Editable example

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

Copied!

Customize Icon

To customize the icon, set props to iconProps.

Editable example

<VStack>
  <DatePicker placeholder="YYYY/MM/DD" iconProps={{ color: "primary" }} />
  <DatePicker placeholder="YYYY/MM/DD" iconProps={{ children: <Ghost /> }} />
</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>
  <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!

Control

Editable example

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

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

Copied!

Editable example

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

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

Copied!

Editable example

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

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

Copied!

Use `React Hook Form`

Editable example

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!

Edit this page on GitHub

PreviousMultiAutocomplete NextMultiDatePicker

DatePicker

Usage

Change Variant

Change Size

Change Color Scheme

Set Default Value

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 Values Outside 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 Selection

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

Disable

Make Read-Only

Make Input Invalid

Customize Icon

Add elements to a dropdown

Control

Use React Hook Form

Use `React Hook Form`