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


captionLayout​

β€’ Optional captionLayout: CaptionLayout

Change the layout of the caption:

  • buttons: 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.

Default Value

buttons

Inherited from​

DayPickerBase.captionLayout

Defined in​

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


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


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


components​

β€’ Optional components: CustomComponents

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

Inherited from​

DayPickerBase.components

Defined in​

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


defaultMonth​

β€’ Optional defaultMonth: Date

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

Default Value

The current month

Inherited from​

DayPickerBase.defaultMonth

Defined in​

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


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


disableNavigation​

β€’ Optional disableNavigation: boolean

Disable the navigation between months.

Default Value

false

Inherited from​

DayPickerBase.disableNavigation

Defined in​

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


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


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


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 Value

false

Inherited from​

DayPickerBase.fixedWeeks

Defined in​

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


β€’ Optional footer: ReactNode

Content to add to the table footer element.

Inherited from​

DayPickerBase.footer

Defined in​

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


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


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


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


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


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


hideHead​

β€’ Optional hideHead: boolean

Hide the month’s head displaying the weekday names.

Default Value

false

Inherited from​

DayPickerBase.hideHead

Defined in​

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


id​

β€’ Optional id: string

A 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:81


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


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


locale​

β€’ Optional locale: Locale

The date-fns locale object used to localize dates.

Default Value

en-US

Inherited from​

DayPickerBase.locale

Defined in​

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


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


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


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


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


numberOfMonths​

β€’ Optional numberOfMonths: number

The number of displayed months.

Default Value

1

Inherited from​

DayPickerBase.numberOfMonths

Defined in​

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


onDayBlur​

β€’ Optional onDayBlur: DayFocusEventHandler

Inherited from​

DayPickerBase.onDayBlur

Defined in​

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


onDayClick​

β€’ Optional onDayClick: DayClickEventHandler

Inherited from​

DayPickerBase.onDayClick

Defined in​

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


onDayFocus​

β€’ Optional onDayFocus: DayFocusEventHandler

Inherited from​

DayPickerBase.onDayFocus

Defined in​

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


onDayKeyDown​

β€’ Optional onDayKeyDown: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyDown

Defined in​

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


onDayKeyPress​

β€’ Optional onDayKeyPress: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyPress

Defined in​

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


onDayKeyUp​

β€’ Optional onDayKeyUp: DayKeyboardEventHandler

Inherited from​

DayPickerBase.onDayKeyUp

Defined in​

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


onDayMouseEnter​

β€’ Optional onDayMouseEnter: DayMouseEventHandler

Inherited from​

DayPickerBase.onDayMouseEnter

Defined in​

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


onDayMouseLeave​

β€’ Optional onDayMouseLeave: DayMouseEventHandler

Inherited from​

DayPickerBase.onDayMouseLeave

Defined in​

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


onDayPointerEnter​

β€’ Optional onDayPointerEnter: DayPointerEventHandler

Inherited from​

DayPickerBase.onDayPointerEnter

Defined in​

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


onDayPointerLeave​

β€’ Optional onDayPointerLeave: DayPointerEventHandler

Inherited from​

DayPickerBase.onDayPointerLeave

Defined in​

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


onDayTouchCancel​

β€’ Optional onDayTouchCancel: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchCancel

Defined in​

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


onDayTouchEnd​

β€’ Optional onDayTouchEnd: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchEnd

Defined in​

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


onDayTouchMove​

β€’ Optional onDayTouchMove: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchMove

Defined in​

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


onDayTouchStart​

β€’ Optional onDayTouchStart: DayTouchEventHandler

Inherited from​

DayPickerBase.onDayTouchStart

Defined in​

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


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


onNextClick​

β€’ Optional onNextClick: MonthChangeEventHandler

Inherited from​

DayPickerBase.onNextClick

Defined in​

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


onPrevClick​

β€’ Optional onPrevClick: MonthChangeEventHandler

Inherited from​

DayPickerBase.onPrevClick

Defined in​

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


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


pagedNavigation​

β€’ Optional pagedNavigation: boolean

Paginate the month navigation displaying the numberOfMonths at time.

Default Value

false

Inherited from​

DayPickerBase.pagedNavigation

Defined in​

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


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.

Default Value

false

Inherited from​

DayPickerBase.reverseMonths

Defined in​

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


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 Value

false

Inherited from​

DayPickerBase.showOutsideDays

Defined in​

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


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


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


styles​

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

Change the inline styles of the HTML elements.

Inherited from​

DayPickerBase.styles

Defined in​

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


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


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


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


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


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