Question:

I am using <a href="https://github.com/YouCanBookMe/react-datetime" rel="nofollow">react-dateTime</a> Picker. react-datetime picker's css is not working.can any one tell me why it look like. It looks like this. <a href="https://i.stack.imgur.com/xpirB.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/xpirB.png" data-original="https://i.stack.imgur.com/xpirB.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

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 ); };

<a href="https://i.stack.imgur.com/73Trc.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/73Trc.png" data-original="https://i.stack.imgur.com/73Trc.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

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 <a href="https://github.com/YouCanBookMe/react-datetime/blob/master/css/react-datetime.css" rel="nofollow">this CSS file</a> 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";

<a href="https://stackoverflow.com/users/5739288/iggy" rel="nofollow">@Iggy</a> add the following code in your webpack.config file. <strong>'script-loader!react-datetime/dist/react-datetime.min.js',</strong>

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' },