React-datepicker: Add className for wrapper

[fresk-nc]

Can you add some className for this div?

[hufftheweevil]

I, too, am looking to control the style of the main wrapper. My biggest issue is that it takes up 100% width, so I can't put two Date Picker fields right next to each other.

[jordansykes]

If you just create your own wrapper for each datepicker element then put on your styles on that, the datepicker will take up 100% of the space. I agree it would be useful to be able to add a classname to that empty containing div though.

[aij]

Duplicate of #932

[ladislavbili]

Yeah I had this problem too, until it is solved I reccomend wrapping it in your own div, style and give classname to that div and then you can set its css like this:
render example

<div className="datepickerWrap">
<DatePicker/>
</div>

css example

.datepickerWrap div{
  width: 100%;
}
.datepickerWrap{
  width: 100%;
}

of course, it is up to you to style it as you want and set everything in your datepicker up, you might also want to change css of one of these guys but that situational

react-datepicker__time
react-datepicker__time-box
react-datepicker__time-list
react-datepicker__input-container
react-datepicker-wrapper
react-datepicker__input-container

[seansfkelley]

As a workaround, you can reasonably safely select the classless div using ... > div:not([class]) where ... selects the parent element you control. This way, you don't need to add another layer with a class just so you can style it.

[seansfkelley]

Related: #1344, #1208, #932. Looks like this wrapper div has been causing a lot of grief.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.