Modifying width of input field in react day picker input

Question

Is it possible to change the default width of input field of DayPickerInput? If yes, then how can I achieve it? I am not sure if we can do this with overlayComponent.

score 10 · Accepted Answer · answered Dec 28 '17 at 11:17

10

You can use inputProps to add your props such as style to the input field. See docs: http://react-day-picker.js.org/api/DayPickerInput#inputProps

For example:

<DayPickerInput inputProps={{ style: { width: 200 } }} />

answered Dec 28 '17 at 11:17

gpbl

4,721
5
31
45

score 0 · Answer 2 · answered Dec 21 '17 at 11:29

0

You can do it by writing your own styles, but first check the stylesheets of day picker here - react-day-picker/lib/style.css and then modify accordingly.

answered Dec 21 '17 at 11:29

nasaa

2,701
8
47
76

I can for sure write my own custom style. but is there a way to pass that custom style as props to the DayPickerInput component? Or are you suggesting to override the whole style.css with a new css file? – aman Dec 24 '17 at 23:18

Modifying width of input field in react day picker input

2 Answers2