How to customize react-datepicker-wrapper class

[chupee120]

Hello,

I'm not able to set width of datePicker to 100% .

The customization is applied to react-datepicker__input-container and input but not react-datepicker-wrapper.

import "./DatePickerInput.css";

<div className={style.containerDatePicker}>
   <DatePicker className={style.datePicker} dateFormat="dd/MM/yyyy" />
</div>

.containerDatePicker, 
.containerDatePicker> div.react-datepicker-wrapper, 
.containerDatePicker> div > div.react-datepicker__input-container
.containerDatePicker> div > div.react-datepicker__input-container input {
   width: 100% !important;
}

.datePicker {
  width: 100% !important;
}

also try this without success:

.react-datepicker__input-container {
    display: block !important;
}

.react-datepicker-wrapper {
    width: 100% !important;
}

.datePicker {
  width: 100% !important;
}

Version is "react-datepicker": "^2.14.1"

Regards,

[cordero67]

I'm having the same problem. Bumping this issue.

[danielmdebrito]

The solution can be found here: https://stackoverflow.com/questions/55794770/how-can-i-style-react-datepicker

[Cordazar]

But this should be a simple option or className set from the component, instead of adding global css rules to override it.

[BrandonMathis]

I agree with @Cordazar. Overriding styles with CSS would not be ideal because my changes would impact every instance of the datepicker in my application.

Would be nice if we could pass a prop to at least append additional classes to the wrapper div.

[wude935]

I'm having the same issue. The react-datepicker-class should be exposed via props so that styling is possible without editing all global instances, IMO.

[jaypeetancero]

I hope this concern would be resolve I don't want to create global style just for that.

[sonny89]

Try with wrapperClassName property:

<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />

.datePicker {
  width: 100%;
}

[rosghub]

@sonny89 confirming this works great

[isaacminogue]

Whilst the above styles the input itself, if you want to style the calendar component, I've had success with <DatePicker calendarClassName={/* conditions */}></DatePicker> with conditional statements to show different classes based on values in the parent component

[dexkode4]

awesome , very helpful

[Akius1]

@sonny89 Thanks a bunch. Very helpful

[marwajomaa]

wrapperClassName="datePicker"

how to use this with next.js it's not working?!!

[undefineq]

wrapperClassName="datePicker"

how to use this with next.js it's not working?!!

import styles from "./styles.module.scss"; wrapperClassName={styles.datePicker}

[marwajomaa]

Yes, I did that but not working!!!

On Tue, 22 Jun 2021, 21:54 Sulkhan, @.***> wrote:

wrapperClassName="datePicker"

how to use this with next.js it's not working?!!

import styles from "./styles.module.scss"; wrapperClassName={styles.datePicker}

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-866247631, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIFJ3M4B5G6CF7ZRV2ZQVVLTUDL43ANCNFSM4LTVMLIQ .

[No-you-are-not]

i have the same issue, when im trying to style the calendar component and not input. Nothing works for me, not calendarClassName, not wrapperClassName, not even putting datepicker inside of another div. The only way that i was able to change styles is changing them by tags like this: .wrapper div{ border: none; background-color: var(--base-white); } but that is just too global obviously

---

okey so i found the way to solve my issue, the reason i couldn't style the calendar is because we use module styles and i tried to overrite styles in module.scss, but i just had to create simle scss file and than import it directly to my component... yep

[ismatim]

wrapperClassName="datePicker"

how to use this with next.js it's not working?!!

import styles from "./styles.module.scss"; wrapperClassName={styles.datePicker}

wrapperClassName="datePicker"

how to use this with next.js it's not working?!!

There is no straight way to make it work with cssmodules & nextjs because it is needed to set each class with each element (inside datapicker). (as far I could see)

[Ofer-Gal]

The 100% of the datepicker is not the same of other control in my page

I tried all sorts of ways. The closest to other controls 100% is 99% 😥

[trunglt-2769]

The 100% of the datepicker is not the same of other control in my page

I tried all sorts of ways. The closest to other controls 100% is 99% 😥

Try adding props box-sizing: border-box; to input element of React DatePicker

[afif14]

There is no straight way to make it work with cssmodules & nextjs because it is needed to set each class with each element (inside datapicker). (as far I could see)

and how to make it work in next js, i have the same issue

[Yanger-Rai]

For Next.js

If you are using shadcn UI. Go into calendar component and remove "flex" from row and head_row. Works perfectly. Refer the screenshot below. Haven't tried directly in day picker, maybe someone do it.

[rever96]

Try with wrapperClassName property:

<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />

This issue should be closed with this reply

[oseji]

For Next.js

If you are using shadcn UI. Go into calendar component and remove "flex" from row and head_row. Works perfectly. Refer the screenshot below. Haven't tried directly in day picker, maybe someone do it.

how can i change the width of the calendar container