Add a class to react-day-picker?

Question

How can I add a class to react-day-picker's today button?

It seems to be possible from the documentation: http://react-day-picker.js.org/api/DayPicker#classNames

const dayPickerClassNames = { todayButton: 'newClass' };

<DayPicker
  classNames={dayPickerClassNames}
/>

However Im getting an error:

Warning: Failed prop type: The prop `classNames.day` is marked as required in `DayPicker`, but its value is `undefined`.

sme · Accepted Answer · 2018-01-22T10:46:01.493

According to the API, it expects the following keys (ie, it needs the container, wrapper, .. months.. month.. day.. etc. keys), but you are only providing the todayButton key/value, apparently you need to provide each key/value pair.

You should be able to import the default classNames object, and then just update the todayButton value like so:

import classNames from '../classNames' // this path is probably not correct

const dayPickerClassNames = { ...classNames, todayButton: 'newClass' };

<DayPicker
  classNames={dayPickerClassNames}
/>

score 1 · Answer 2 · answered Aug 11 '21 at 00:07

const defaultClassNames = DayPicker.defaultProps.classNames,
      newClassNames = { ...datePickerClassNames,
                        container: `${defaultClassNames.container} MY_CONTAINER`
                      };

...

<DayPicker classNames={dayPickerClassNames}/>

I'd recommend appending the default class with your own as in the example above the default container class appended with MY_CONTAINER class.

score 0 · Answer 3 · answered Jan 11 '18 at 15:24

0

I believe it may just be parsing the word day and looking for a className for that parsed day******* I think I would just try defining the key:value relationship as they have in their documentation.

// const dayPickerClassNames = { todayButton: 'newClass' };

<DayPicker
  classNames={ todayButton: 'newClass' }
/>

answered Jan 11 '18 at 15:24

Cristian Thompson

36
3

Nope, this crashes my app: imports/client/Pages/Events/EventsPage.js:258:42: Unexpected token, expected } (258:42) – Evanss Jan 11 '18 at 15:34
It needs to be `classNames={ { todayButton: 'newClass' } }` for it not to crash – sme Jan 22 '18 at 10:36

Add a class to react-day-picker?

3 Answers3