React-datepicker: Datepicker style not working, any dependencies I need?

[johhansantana]

When I click it does this instead:

is there a way to add the css manually?

when I check the dev tools there is no css being load up

[johhansantana]

well I was having trouble importing react-datepicker/dist/react-datepicker.css' I'm not a webpack savvy so I just added it as a static file and now it works.

[sislam6]

Just use a tilde in front of the the path. Just like you import bootstrap from the node dependencies.
Add this in your scss file import @import "~react-datepicker/dist/react-datepicker.css". This should work.

[AKArunkumar]

@johhansantana if you solved this issue please let me know how,
I tried, importing using require, importing using ~, made static css file in same directory tried to import but nothing worked for me.

[AliAlperSakar]

You should import css of react-datepicker=> import "react-datepicker/dist/react-datepicker.css" in index.js/index.ts file which includes getElementById('root').

[DomantasP]

Adding 'import 'react-datepicker/dist/react-datepicker-cssmodules.min.css' to my index.jsx solved the problem for me.

[Boucherie]

We tried adding both

import "react-datepicker/dist/react-datepicker.css"
import 'react-datepicker/dist/react-datepicker-cssmodules.min.css'

and neither threw an error, but no styles. changing the file to something like

'react-datepicker/dist/react-datepicker-cssmodules.min.css1' throws an error, so they are being found and imported, but the chrome inspetor shows no styles :(

[Nadya1993]

We tried adding both

import "react-datepicker/dist/react-datepicker.css"
import 'react-datepicker/dist/react-datepicker-cssmodules.min.css'

and neither threw an error, but no styles. changing the file to something like

'react-datepicker/dist/react-datepicker-cssmodules.min.css1' throws an error, so they are being found and imported, but the chrome inspetor shows no styles :(

@Boucherie you can just import css from cdnjs: @import url('https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.8.0/react-datepicker.min.css');

It was the only way that worked for me

[larsblumberg]

This is how the component looks to me:

The mentioned imports are accepted (no compile error) but styling is not properly applied.

[SidOfc]

Before anything else, thank you for providing this component 💟

I think quite some folks end up here after checking this page: https://reactdatepicker.com/ which actually lacks a critical import line for the stylesheet. This import is included in the GH README.md, however:

Perhaps it would be a good idea to update the website to include this import there as well?

Cheers and keep up the good work 👍

[topovik]

import DatePicker from "react-datepicker"
require('react-datepicker/dist/react-datepicker.css')
it should work

[SidOfc]

While it should work, that doesn't mean it is obvious that you'd do so from the actual website. It's not too bad since GH docs mention it but just adding the import line I think will prevent folks from having to search for it or figure out by themselves that it's "not on the website, but only on GH".

Also, if you can import DatePicker, can't you use ES6 modules to import 'react-datepicker/dist/react-datepicker.css' in your setup @ffpetrovic? :)

[ffpetrovic]

Yes, if you can import the component using ES6 import then it should work for .css files as well. And this section should be added to the website. Since the npm install part is there, the following steps necessary for the library to work/look properly should be listed as well.

[michael-harley]

This is how the component looks to me:

The mentioned imports are accepted (no compile error) but styling is not properly applied.

This is how it looked to me as well, and the styling is not properly applied.
Anyone know how to fix this styling?
I thought it should looked like this: https://reactdatepicker.com/

[clinton-slice]

Add the line below to the top of your file where you are using the DatePicker
import 'react-datepicker/dist/react-datepicker.css';

[franlol]

In my case, under a nextjs project with babel7 and webpack4, the only way that I can fix the css is

import DatePicker from "react-datepicker"
import "react-datepicker/src/stylesheets/datepicker.scss";

Hope it can help someone

[Eezi]

In my case the import of the css file didn't work at all, but I fixed it by replacing line in the css file:
* content: "\00d7"; with this --> content: ×*

import "react-datepicker/dist/react-datepicker.css";

[michelmany]

@franlol your solution worked for me. Thanks!

[ThusharaSampath]

import "react-datepicker/dist/react-datepicker.css in index.js

Try this one ! works for me ! thanks AliAlperSakar

[nielsuit227]

This becomes especially annoying on a dev-server. I had to copy the CSS and manually move it.