CODEWITHSUNDEEP
react-day-picker
Evanss
Evanss

Reputation: 23593

Add a class to react-day-picker?

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

Upvotes: 4

Views: 2840

Answers (3)

molexi
molexi

Reputation: 668

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.

Upvotes: 1

sme
sme

Reputation: 4153

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

Upvotes: 2

Cristian Thompson
Cristian Thompson

Reputation: 36

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' }
/>

Upvotes: 0

Related Questions