React-date-picker: Styling of the datepicker is off

[BaherZ]

The styling of the datepicker seems to be off, i've tried importing the css from the dist folder directly and it didn't work, any ideas? here's how it looks like: https://ibb.co/gEPdep

[adityapsvs]

+1 Facing the same issue for date-picker and time-picker as well
https://ibb.co/hwmYx9

[BaherZ]

@adityapsvs incase you're still facing this and need a datepicker, i ended up switching to this datepicker : https://github.com/secretyouth/react-datez

[adityapsvs]

@BaherZ Oh, okay! I have been using react-datepicker. The one that you've mentioned
seems to be having a neat UI. Thank you, I appreciate it!

[wojtekmaj]

Hi there,
it looks like the default styling is in conflict with your custom styling. You can try and fix it on your own, but to really fix it I'd need to have a look at your implementation, styles especially. If you could share me privately some minimal repro or your complied CSS file at the very least, that would be very helpful.

React-Date-Picker uses several number inputs to enable advanced validation. You can use tricks like using your arrow buttons to navigate between the fields. All of that to simulate as good as we can the native date input. This however comes at a cost of a complex structure which may break if you have a lot of custom styling.

[azaitw]

I think webpack css-loader is the cause. css-loader's localIdentName option renames classnames, but react-date-picker's classnames do not change accordingly. To solve this, either setting css-loader's localIdentName: '[local]', or setting modules: false. If you want to keep the original localIdentName settings for other css files, you can create a separate rule in webpack only for this component.

[azaitw]

By the way, according to bundlephobia.com, react-datez weights 72kb gzipped, react-datepicker is 20.4kb (which requires moment.js, 64.2kb). and react-date-picker is merely 1.1kb. react-date-picker is the best among them if performance is a concern.

[josh-stevens]

I ran into this problem as well. The css-loader is indeed the issue (our localIdentName adds a hash to all classnames). I think the library can avoid this if it imports its css like so:

import styles from 'styles.css'

And then when giving classnames to components you access them from the imported styles object:

className={styles['whatever-class']}

Rather than using raw strings for classnames. This allows CSS loader to map the classnames correctly.

[sava1192]

so, as mentioned above problem is in webpack.config localIdentName: [hash].
There is couple ways to fix it:
1) Kindly ask author to use css imports :)
2) Update your webpack config to handle this css files classnames without hashing

As i'm only using less for css imports i've ended with adding smth like this to my config

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
},

If you still want to use .css with css imports you'll probably need some more sophisticated test regexp to mach only css files inside node_modules/react-date-picker