Skip to main content

Interface: DayPickerSingleProps

The props for the DayPicker component when using mode="single".

Hierarchy​

Properties​

ISOWeek​

β€’ Optional ISOWeek: boolean

Use ISO week dates instead of the locale setting. See also https://en.wikipedia.org/wiki/ISO_week_date.

Setting this prop will ignore weekStartsOn and firstWeekContainsDate.

Inherited from​

DayPickerBase.ISOWeek

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:183


captionLayout​

β€’ Optional captionLayout: CaptionLayout

Change the layout of the caption:

  • buttons (default): display prev/right buttons
  • dropdown: display drop-downs to change the month and the year

Note: the dropdown layout is available only when fromDate, fromMonth orfromYear and toDate, toMonth or toYear are set.

Inherited from​

DayPickerBase.captionLayout

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:145


className​

β€’ Optional className: string

The CSS class to add to the container element. To change the name of the class instead, use classNames.root.

Inherited from​

DayPickerBase.className

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:45


classNames​

β€’ Optional classNames: Partial<StyledElement<string>>

Change the class names of the HTML elements.

Use this prop when you need to change the default class names β€” for example when using CSS modules.

Inherited from​

DayPickerBase.classNames

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:52


components​

β€’ Optional components: CustomComponents

Map of components used to create the layout. Look at the components source to understand how internal components are built.

Inherited from​

DayPickerBase.components

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:188


defaultMonth​

β€’ Optional defaultMonth: Date

The initial month to show in the calendar. Default is the current month.

Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use []] and [onMonthChange.

Inherited from​

DayPickerBase.defaultMonth

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:81


dir​

β€’ Optional dir: string

The text direction of the calendar. Use ltr for left-to-right (default) or rtl for right-to-left.

Inherited from​

DayPickerBase.dir

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:238


disableNavigation​

β€’ Optional disableNavigation: boolean

Disable the navigation between months.

Inherited from​

DayPickerBase.disableNavigation

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:124


disabled​

β€’ Optional disabled: Matcher | Matcher[]

Apply the disabled modifier to the matching days.

Inherited from​

DayPickerBase.disabled

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:205


firstWeekContainsDate​

β€’ Optional firstWeekContainsDate: 1 | 2 | 3 | 4 | 5 | 6 | 7

The day of January, which is always in the first week of the year. See also https://date-fns.org/docs/getWeek and https://en.wikipedia.org/wiki/Week#Numbering

Inherited from​

DayPickerBase.firstWeekContainsDate

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:176


fixedWeeks​

β€’ Optional fixedWeeks: boolean

Display six weeks per months, regardless the month’s number of weeks. To use this prop, showOutsideDays must be set. Default to false.

Inherited from​

DayPickerBase.fixedWeeks

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:150


β€’ Optional footer: ReactNode

Content to add to the tfoot element.

Inherited from​

DayPickerBase.footer

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:191


formatters​

β€’ Optional formatters: Partial<Formatters>

A map of formatters. Use the formatters to override the default formatting functions.

Inherited from​

DayPickerBase.formatters

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:244


fromDate​

β€’ Optional fromDate: Date

The earliest day to start the month navigation.

Inherited from​

DayPickerBase.fromDate

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:100


fromMonth​

β€’ Optional fromMonth: Date

The earliest month to start the month navigation.

Inherited from​

DayPickerBase.fromMonth

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:108


fromYear​

β€’ Optional fromYear: number

The earliest year to start the month navigation.

Inherited from​

DayPickerBase.fromYear

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:116


hidden​

β€’ Optional hidden: Matcher | Matcher[]

Apply the hidden modifier to the matching days. Will hide them from the calendar.

Inherited from​

DayPickerBase.hidden

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:210


hideHead​

β€’ Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Inherited from​

DayPickerBase.hideHead

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:154


id​

β€’ Optional id: string

An unique id to replace the random generated id, used by DayPicker for accessibility.

Inherited from​

DayPickerBase.id

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:74


initialFocus​

β€’ Optional initialFocus: boolean

When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled).

Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.

Inherited from​

DayPickerBase.initialFocus

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:200


labels​

β€’ Optional labels: Partial<Labels>

Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.

Inherited from​

DayPickerBase.labels

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:232


locale​

β€’ Optional locale: Locale

The date-fns locale object used to localize dates. Defaults to* en-US.

Inherited from​

DayPickerBase.locale

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:226


mode​

β€’ mode: "single"

Defined in​

packages/react-day-picker/src/types/DayPickerSingle.ts:10


modifiers​

β€’ Optional modifiers: DayModifiers

Add modifiers to the matching days.

Inherited from​

DayPickerBase.modifiers

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:223


modifiersClassNames​

β€’ Optional modifiersClassNames: ModifiersClassNames

Change the class name for the day matching the modifiers.

Inherited from​

DayPickerBase.modifiersClassNames

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:56


modifiersStyles​

β€’ Optional modifiersStyles: ModifiersStyles

Change the inline style for the day matching the modifiers.

Inherited from​

DayPickerBase.modifiersStyles

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:69


month​

β€’ Optional month: Date

The month displayed in the calendar.

As opposed to defaultMonth, use this prop with onMonthChange to change the month programmatically.

Inherited from​

DayPickerBase.month

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:88


numberOfMonths​

β€’ Optional numberOfMonths: number

The number of displayed months. Defaults to 1.

Inherited from​

DayPickerBase.numberOfMonths

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:96


onDayBlur​

β€’ Optional onDayBlur: DayFocusEventHandler

Inherited from​

DayPickerBase.onDayBlur

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:248


onDayClick​

β€’ Optional onDayClick: DayClickEventHandler

Inherited from​

DayPickerBase.onDayClick

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:246


onDayFocus​

β€’ Optional onDayFocus: DayFocusEventHandler

Inherited from​

DayPickerBase.onDayFocus

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:247


onDayKeyDown​

β€’ Optional onDayKeyDown: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyDown

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:251


onDayKeyPress​

β€’ Optional onDayKeyPress: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyPress

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:253


onDayKeyUp​

β€’ Optional onDayKeyUp: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyUp

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:252


onDayMouseEnter​

β€’ Optional onDayMouseEnter: DayMouseEventHandler

Inherited from​

DayPickerBase.onDayMouseEnter

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:249


onDayMouseLeave​

β€’ Optional onDayMouseLeave: DayMouseEventHandler

Inherited from​

DayPickerBase.onDayMouseLeave

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:250


onDayTouchCancel​

β€’ Optional onDayTouchCancel: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchCancel

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:254


onDayTouchEnd​

β€’ Optional onDayTouchEnd: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchEnd

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:255


onDayTouchMove​

β€’ Optional onDayTouchMove: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchMove

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:256


onDayTouchStart​

β€’ Optional onDayTouchStart: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchStart

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:257


onMonthChange​

β€’ Optional onMonthChange: MonthChangeEventHandler

Event fired when the user navigates between months.

Inherited from​

DayPickerBase.onMonthChange

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:92


onNextClick​

β€’ Optional onNextClick: MonthChangeEventHandler

Inherited from​

DayPickerBase.onNextClick

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:258


onPrevClick​

β€’ Optional onPrevClick: MonthChangeEventHandler

Inherited from​

DayPickerBase.onPrevClick

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:259


onSelect​

β€’ Optional onSelect: SelectSingleEventHandler

Event fired when a day is selected.

Defined in​

packages/react-day-picker/src/types/DayPickerSingle.ts:14


onWeekNumberClick​

β€’ Optional onWeekNumberClick: WeekNumberClickEventHandler

Inherited from​

DayPickerBase.onWeekNumberClick

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:260


pagedNavigation​

β€’ Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Inherited from​

DayPickerBase.pagedNavigation

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:128


required​

β€’ Optional required: boolean

Make the selection required.

Defined in​

packages/react-day-picker/src/types/DayPickerSingle.ts:16


reverseMonths​

β€’ Optional reverseMonths: boolean

Render the months in reversed order (when numberOfMonths is greater than 1) to display the most recent month first.

Inherited from​

DayPickerBase.reverseMonths

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:133


selected​

β€’ Optional selected: Date

The selected day.

Overrides​

DayPickerBase.selected

Defined in​

packages/react-day-picker/src/types/DayPickerSingle.ts:12


showOutsideDays​

β€’ Optional showOutsideDays: boolean

Show the outside days. An outside day is a day falling in the next or the previous month. Default is false.

Inherited from​

DayPickerBase.showOutsideDays

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:159


showWeekNumber​

β€’ Optional showWeekNumber: boolean

Show the week numbers column. Weeks are numbered according to the local week index. To use ISO week numbering, use the ISOWeek prop.

Default Value

false

Inherited from​

DayPickerBase.showWeekNumber

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:166


style​

β€’ Optional style: CSSProperties

Style to apply to the container element.

Inherited from​

DayPickerBase.style

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:61


styles​

β€’ Optional styles: Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>

Change the inline styles for each UIElement.

Inherited from​

DayPickerBase.styles

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:65


toDate​

β€’ Optional toDate: Date

The latest day to end the month navigation.

Inherited from​

DayPickerBase.toDate

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:104


toMonth​

β€’ Optional toMonth: Date

The latest month to end the month navigation.

Inherited from​

DayPickerBase.toMonth

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:112


toYear​

β€’ Optional toYear: number

The latest year to end the month navigation.

Inherited from​

DayPickerBase.toYear

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:120


today​

β€’ Optional today: Date

The today’s date. Default is the current date. This Date will get the today modifier to style the day.

Inherited from​

DayPickerBase.today

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:219


weekStartsOn​

β€’ Optional weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6

The index of the first day of the week (0 - Sunday). Overrides the locale's one.

Inherited from​

DayPickerBase.weekStartsOn

Defined in​

packages/react-day-picker/src/types/DayPickerBase.ts:170