---
id: getmodifiersfromprops
title: getModifiersFromProps
sidebar_label: getModifiersFromProps
---
<a id="docs"></a>

Return the `modifiers` prop including the modifiers from shortcut-props
(`selected`, `disabled` and `hidden`)



<a id="props"></a>

# getModifiersFromProps props


## className

CSS class to add to the root element.
<a class="syntax"></a>

`prop `**`className?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

<hr />




## classNames

Change the class names used by `DayPicker`.
<a class="syntax"></a>

`prop `**`classNames?:`** [`DayPickerClassNames`](./undefineds#daypickerclassnames)

<hr />

Use this prop when you need to change the [default class
names](defaultClassNames.mdx) — for example when using CSS modules.

### Example

Using custom class names for the head and the caption elements.

```jsx preview
 function App() {
   const css = `
     .salmon-head {
       color: salmon;
     }
     .purple-caption {
       font-weight: bold;
       color: purple;
       padding: 3px 0 6px 0;
     }
   `;
   return (
     <>
       <style>{css}</style>
       <DayPicker
         classNames={{
           head: 'salmon-head',
           caption: 'purple-caption'
         }}
       />
     </>
   );
 }
```



## components

Customize the internal components.
<a class="syntax"></a>

`prop `**`components?:`** [`CustomComponents`](./undefineds#customcomponents)

<hr />




## days

An object of modifiers.
<a class="syntax"></a>

`prop `**`days?:`** [`DaysModifiers`](./undefineds#daysmodifiers)

<hr />




## daysClassNames

Change the class names used for the [days modifiers](#days).
<a class="syntax"></a>

`prop `**`daysClassNames?:`** [`DaysClassNames`](./undefineds#daysclassnames)

<hr />




## daysStyles

Change the inline style for the [days modifiers](#days).
<a class="syntax"></a>

`prop `**`daysStyles?:`** [`DaysStyles`](./undefineds#daysstyles)

<hr />




## dir

The text direction of the calendar. Use `ltr` for left-to-right (default)
or `rtl` for right-to-left.
<a class="syntax"></a>

`prop `**`dir?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

<hr />




## disabled

Disable the matching days. Disabled days cannot be clicked.
<a class="syntax"></a>

`prop `**`disabled?:`** [`DayMatcher`](./undefineds#daymatcher)

<hr />




## enableOutsideDaysClick

Enable click event for outside days when [showOutsideDays](#showoutsidedays) is used.
<a class="syntax"></a>

`prop `**`enableOutsideDaysClick?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## fixedWeeks

Display six weeks per months, regardless the month’s number of weeks. Outside
days will be always shown when setting this prop.
<a class="syntax"></a>

`prop `**`fixedWeeks?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## formatCaption

Format the month caption text.
<a class="syntax"></a>

`prop `**`formatCaption?:`** [`MonthCaptionFormatter`](./undefineds#monthcaptionformatter)

<hr />




## formatDay

Format the content of the day element.
<a class="syntax"></a>

`prop `**`formatDay?:`** [`DayFormatter`](./undefineds#dayformatter)

<hr />




## formatWeekNumber

Format the week numbers (when [showWeekNumber](#showweeknumber) is set).
<a class="syntax"></a>

`prop `**`formatWeekNumber?:`** [`WeekNumberFormatter`](./undefineds#weeknumberformatter)

<hr />




## formatWeekdayName

Format the weekday's name in the head element.
<a class="syntax"></a>

`prop `**`formatWeekdayName?:`** [`WeekdayNameFormatter`](./undefineds#weekdaynameformatter)

<hr />




## fromMonth

Allow navigation after (and including) the specified month.
<a class="syntax"></a>

`prop `**`fromMonth?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

<hr />




## hidden

Hide the matching days.
<a class="syntax"></a>

`prop `**`hidden?:`** [`DayMatcher`](./undefineds#daymatcher)

<hr />




## initialMonth

The initial month to show in the calendar.
<a class="syntax"></a>

`prop `**`initialMonth?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

<hr />




## locale

A locale object to localize
the user interface.
<a class="syntax"></a>

`prop `**`locale?:`** [`dateFns.Locale`](https://date-fns.org/docs/Locale)

<hr />




## month

The rendered month. Implement [onMonthChange](#onmonthchange) to enable months
navigation.
<a class="syntax"></a>

`prop `**`month?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

<hr />




## nextLabel

Label used for the next month button in [Navigation](#navigation). Set it to empty
string to hide the button.
<a class="syntax"></a>

`prop `**`nextLabel?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

<hr />




## numberOfMonths

The number of months to render.
<a class="syntax"></a>

`prop `**`numberOfMonths?:`** [`number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number)

<hr />




## onDayClick

Event handler when the user clicks on a day.
<a class="syntax"></a>

`prop `**`onDayClick?:`** [`DayClickEventHandler`](./undefineds#dayclickeventhandler)

<hr />




## onMonthChange

Event handler when the month changes.
<a class="syntax"></a>

`prop `**`onMonthChange?:`** [`MonthChangeEventHandler`](./undefineds#monthchangeeventhandler)

<hr />




## onNextClick

Event handler when the next month button is clicked.
<a class="syntax"></a>

`prop `**`onNextClick?:`** [`MonthChangeEventHandler`](./undefineds#monthchangeeventhandler)

<hr />




## onPrevClick

Event handler when the previous month button is clicked.
<a class="syntax"></a>

`prop `**`onPrevClick?:`** [`MonthChangeEventHandler`](./undefineds#monthchangeeventhandler)

<hr />




## pagedNavigation

When displaying multiple months, the navigation will be paginated
displaying the [numberOfMonths](#numberofmonths) months at time instead of
one.
<a class="syntax"></a>

`prop `**`pagedNavigation?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## prevLabel

Label used for the previous month button in [Navigation](#navigation). Set it to
empty string to hide the button.
<a class="syntax"></a>

`prop `**`prevLabel?:`** [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string)

<hr />




## reverseMonths

Render the months in reversed order. Useful when [numberOfMonths](#numberofmonths) is
greater than `1`, to display the most recent month first.
<a class="syntax"></a>

`prop `**`reverseMonths?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## selected

Apply the `selected` modifiers to the matching days.
<a class="syntax"></a>

`prop `**`selected?:`** [`DayMatcher`](./undefineds#daymatcher)

<hr />




## showCaption

Show the month’s caption. As default, the caption displays month and year.
<a class="syntax"></a>

`prop `**`showCaption?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## showHead

Show the month’s head. As default, it displays the weekday names according
to [locale](#locale).
<a class="syntax"></a>

`prop `**`showHead?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## showNavigation

Show the navigation bar. [onMonthChange](#onmonthchange) must be set.
<a class="syntax"></a>

`prop `**`showNavigation?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## showOutsideDays

Show the outside days. An outside day is a day falling in the next or the
previous month.
<a class="syntax"></a>

`prop `**`showOutsideDays?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## showWeekNumber

Show the week numbers column.
<a class="syntax"></a>

`prop `**`showWeekNumber?:`** [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean)

<hr />




## style

Style to apply to the root element.
<a class="syntax"></a>

`prop `**`style?:`** [`CSSProperties`](undefined)

<hr />




## styles

Inline styles to apply to the [DayPickerElements](#daypickerelements).
<a class="syntax"></a>

`prop `**`styles?:`** [`DayPickerStyles`](./undefineds#daypickerstyles)

<hr />




## toMonth

Allow navigation before (and including) the specified month.
<a class="syntax"></a>

`prop `**`toMonth?:`** [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

<hr />
