New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to customize react-datepicker-wrapper class #2099
Comments
I'm having the same problem. Bumping this issue. |
The solution can be found here: https://stackoverflow.com/questions/55794770/how-can-i-style-react-datepicker |
But this should be a simple option or className set from the component, instead of adding global css rules to override it. |
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. |
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. |
I hope this concern would be resolve I don't want to create global style just for that. |
Try with
|
@sonny89 confirming this works great |
Whilst the above styles the input itself, if you want to style the calendar component, I've had success with |
awesome , very helpful |
@sonny89 Thanks a bunch. Very helpful |
how to use this with next.js it's not working?!! |
import styles from "./styles.module.scss"; |
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
<#2099 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AIFJ3M4B5G6CF7ZRV2ZQVVLTUDL43ANCNFSM4LTVMLIQ>
.
|
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: 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 |
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 |
This issue should be closed with this reply |
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.
also try this without success:
Version is "react-datepicker": "^2.14.1"
Regards,
The text was updated successfully, but these errors were encountered: