Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.3

DatePicker

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

Source@yamada-ui/calendar

Import

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!

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!

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!

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

PreviousMultiAutocompleteNextMultiDatePicker