50687

react-dateTime picker Css not working

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>

Answer1:

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";

Answer2:

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

Recommend

  • LocalDate comparison, getting orders between two dates
  • Android changing fragment order inside FragmentPagerAdapter
  • Jquery popup on mouse over of calendar control
  • C# program and C++ DLL compiled for 32-bit system crash on 64-bit system
  • Adjust width of select element according to selected option's width
  • Loading .coffee files via a view in Rails
  • Zurb Foundation _global.scss meta styles for js?
  • Unable to decode certificate at client new X509Certificate2()
  • Create DicomImage from scratch using Dcmtk
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • How do I get HTML corresponding to current DOM tree?
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • How to create a file in java without a extension
  • $wpdb not working in file of WordPress plugin
  • Meteor helpers not available in Angular template
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • Modifying destination and filename of gulp-svg-sprite
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • Release, debug version and Authorization Google?
  • QuartzCore.framework for Mono Develop
  • RestKit - RKRequestDelegate does not exist
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Is there a mandatory requirement to switch app.yaml?
  • PHP: When would you need the self:: keyword?
  • Buffer size for converting unsigned long to string
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Acquiring multiple attributes from .xml file in c#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Hits per day in Google Big Query
  • coudnt use logback because of log4j
  • Change div Background jquery
  • How to get Windows thread pool to call class member function?
  • Django query for large number of relationships
  • reshape alternating columns in less time and using less memory
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • How can I use threading to 'tick' a timer to be accessed by other threads?
  • How to load view controller without button in storyboard?