React-dates: Getting started instructions

Created on 30 Aug 2016 · 18Comments · Source: airbnb/react-dates

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

Source

arthurvi

👍41

Most helpful comment

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}
/>

arthurvi on 30 Aug 2016

👍32 ❤12 🎉12 😄9

All 18 comments

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}
/>

arthurvi on 30 Aug 2016

👍32 ❤12 🎉12 😄9

@arthurvi this was very helpful for me. thanks!

mundizzle on 31 Aug 2016

👍5

@arthurvi I think it'd be really great to add these instructions to the docs! We'd def accept a PR.

We're thinking a lot about how to implement CSS better for this library so any feedback suggestions you have are super appreciated. I think we're going to look into integrating https://github.com/airbnb/react-with-styles somehow which might help with some of these issues.

majapw on 2 Sep 2016

I agree! I'm trying to do a simple date range picker with minimal code, and I'm having a hard time figuring it out from the example code.

EngineeredTruth on 5 Sep 2016

👍3

My issue is a little more complicated, but more docs would be appreciated; I'm trying to implement the DateRangePicker into an existing Angular app via ngReact and any extra insight into making the components work always helps.

3dg4r on 20 Sep 2016

👍1

If you are using Meteor, you can import 'react-dates/lib/css/_datepicker.css'; inside your imports/startup/client/ui.js (or index.js, or whatever your setup is).

vladbalan on 5 Oct 2016

👍3

RyanThomasMusser on 5 Oct 2016

+1, a good documentation is essential and prevents all these related issues.

DanielRuf on 9 Nov 2016

👍2

turnerniles on 15 Nov 2016

thanks a lot for those instructions!

goums on 29 Nov 2016

Thanks @arthurvi

DanielRuf on 14 Dec 2016

😄2

Running into the same issue using webpack 2 + PostCSS + isomorphic-style-loader, any idea on why the CSS won't load into the doc?

I'm importing the .css file correctly at the top of the document and setting the component up correctly its just not pulling any styles

ryanbelke on 30 May 2017

👍3

Same issue here, correctly importing react-dates/lib/css/_datepicker.css however there are no styles in there for the classes being generated by DateRangePicker...

alexcroox on 4 Jul 2017

@Sceluswe commenting on a closed, old issue is unlikely to get much traction. Could you open a new issue? What do you mean by a smaller example in this case?

majapw on 20 Oct 2017

I have an issues, i have install all dependencies and import
import 'react-dates/initialize'; import 'react-dates/lib/css/_datepicker.css';
but still have this issues :(
how can i fix it :( ?
Solved ;/ use "react-dates": "^13.0.2" insted of "react-dates": "^16.3.4",