react-dateTime picker Css not working

Question

I am using react-dateTime Picker. react-datetime picker's css is not working.can any one tell me why it look like. It looks like this.

and second one this following function is working but css is working.

var yesterday = Datetime.moment().subtract( 1, 'day' );
var valid = function( current ){
    return current.isAfter( yesterday );
};

Can you share more of the component where you use the dateTime component? Specifically, how are you loading the CSS for the component? — Brett DeWoody, May 26 '17 at 11:42

score 5 · Answer 1 · answered May 26 '17 at 12:07

5

You need to load the CSS file included with the react-dateTime picker. There's a small note in the docs regarding this but it's easy to miss.

You need to include this CSS file at some point. This could be copied into a master CSS file, or imported into the component where you use the react-dateTime picker.

import "path/to/node_modules/react-datetime/css/react-datetime.css";

answered May 26 '17 at 12:07

Brett DeWoody

59,771
29
135
184

Error: Cannot find module "/node_modules/react-datetime/css/react-datetime.css" – Sweety May 26 '17 at 12:15
Hard to say without knowing more about your setup. You might have to play with the path to get it correct, or use a webpack loader for the CSS file. – Brett DeWoody May 26 '17 at 12:20
I tried to copy all css and store in style folder with new file but this also not worked for me. – Sweety May 26 '17 at 12:22
@Sweety, I am having similar issue. I copy+paste CSS but it does not change the appearance at all. I am 99% sure the problem is with my webpack. Do you mind sharing the configuration of your webpack to make CSS works? – Iggy Jun 10 '17 at 20:52
1

@Iggy add the following code in your webpack.config file. 'script-loader!react-datetime/dist/react-datetime.min.js', – Sweety Jun 12 '17 at 08:31
Haha, yeahhh... that CSS file makes a big difference. Thanks! – Izzi Jan 25 '21 at 16:39

score 0 · Accepted Answer · answered Jun 12 '17 at 04:50

@Iggy add the following code in your webpack.config file. 'script-loader!react-datetime/dist/react-datetime.min.js',

 entry: [
       'script-loader!jquery/dist/jquery.min.js',
       'script-loader!foundation-sites/dist/foundation.min.js',
       'script-loader!react-datetime/dist/react-datetime.min.js',//add this line in your webpack.config file
      './app/app.jsx'],
      externals:{
        jquery:'jQuery'

      },

react-dateTime picker Css not working

2 Answers2

Linked