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.

[arun-topagi]

@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.

[nevingrowingstars]

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

This is the one fix which is working....

[ndnenkov]

I was having an issue with webpacker where it worked in dev, but not in other environments. I had to add

@import 'react-datepicker/dist/react-datepicker';

To application.scss rather the inline import.

[kbiswas100]

if nothing works then you can add this class to your css file ,

.react-datepicker__time-list-item {
    width: 70px;
    margin-left: -40px;
    padding-left: 18px !important;
}

[GodAlmighty990]

I had to add import 'react-datepicker/dist/react-datepicker.css'; to my App.js.

Here is my App.js file

This could also be your index.js file

import React from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; import Layout from './layouts/Layout'; import 'react-toastify/dist/ReactToastify.min.css'; import 'react-datepicker/dist/react-datepicker.css'; import 'react-image-lightbox/style.css';

const App = () => {

return (

  <Router basename={process.env.PUBLIC_URL}>

    <Layout />

  </Router>

); };

export default App;

[pedro-pinho]

In my case it was because I had the postcss-purgecss plugin installed, and it was purging some of the css To fix it, I had to update my postcss.config.js file to this:

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}', './styles/*.{scss}'],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ['html', 'body', 'react-datepicker'],
      },
    ],
  ],
}

[DevOzair]

I ended up copying everything in the react-datepicker.css into my main index CSS, and added it in a section below. Nothing above was working.

(new to all this, 3rd day at React so my solution is 100% not the best :D )

[themegabyte]

FYI for "next": "12.3.1"

Add your import to the _app.js file:

Like so:

import "../styles/globals.css";
import "react-datepicker/dist/react-datepicker.css"; # 👈

import { SWRConfig } from "swr";
import axios from "axios";
...

Documentation here: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules

[ashwindevx]

I ended up copying everything in the react-datepicker.css into my main index CSS, and added it in a section below. Nothing above was working.

(new to all this, 3rd day at React so my solution is 100% not the best :D )

Can you share the style you copied and pasted to your index CSS file? Thanks!

[amanattryb]

I am stack with this issue as I am trying to run yarn run build

Error: 'Calendar' is not exported by node_modules/react-date-range/dist/index.js, imported by src/composite-component/date-picker/date-picker.tsx

[martijnrusschen]

@amanattryb Based on the error it seems you may be using a different component.