Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Getting started instructions

See original GitHub issue

Sorry, I’m missing any getting started instructions.

Import right component

I figured out that SingleDatePicker is exported from node_modules. So step 1 for example is:

import { SingleDatePicker } from 'react-dates';

CSS styling

But what about CSS? My page currently looks like the image below.

I cannot find any custom steps I have to undertake after npm install --save react-dates. It can be solved by copying contents of node_modules/react-dates/lib/css/_datepicker.css to a css file and include that myself, but I guess it would be nice if it worked out of the box?

Should users build this project first or…?

Issue Analytics

State:
Created 7 years ago
Reactions:41
Comments:18 (2 by maintainers)

Top GitHub Comments

65reactions

arthurvicommented, Aug 30, 2016

Found a way to get it working.

Would it be good to add these instructions to the docs?
Is CSS just not loaded out of the box by the components and is this the right way? Or should we always build the .scss files with Sass loader and webpack? There should be an easier solution than this right?

Install dependencies

npm install --save react-dates

Make sure you have the following dependencies installed (not jquery after it’s dropped #39):

 npm install --save moment react react-dom react-addons-shallow-compare jquery

Include component

import { SingleDatePicker } from 'react-dates';

Include CSS

When you use Webpack with CSS loader:

import 'react-dates/lib/css/_datepicker.css';

Otherwise create a CSS file with the contents of node_modules/react-dates/lib/css/_datepicker.css and include it in the html <head> section.

Make some awesome datepickers

<SingleDatePicker
    id="date_input"
    date={date}
    focused={focused}
    onDateChange={this.onDateChange}
    onFocusChange={this.onFocusChange}
/>

5reactions

mundizzlecommented, Aug 31, 2016

@arthurvi this was very helpful for me. thanks!