React-datepicker: Initial style error?

[Nopzen]

Hello.

I've recently discovered this cool tool and wanted to use it but when i init the tool in my application i looks like this:

Its missing all styles that you guys have. Im currently firing up the tool like this:

<DatePicker selected={this.state.startDate}/>

and i've importede React, Moment and DatePicker from my node modules like this:
import DatePicker from 'react-datepicker'; import moment from 'moment'; import React from 'react';

Is there any explanation why this is happning ?

[Nopzen]

NB: When i look my inspect tools, the classes are applyed on the html document but not loaded in?

[aspirisen]

@Nopzen Try to embed the datepicker's CSS file manually in your HTML document

[Nopzen]

@aspirisen - Its added through npm, i guess that datepicker should use the stylesheet it self?

• its not possible for me to add the css file from the node_modules folder.

[rafeememon]

What code tool are you using? Can you add import 'react-datepicker/dist/react-datepicker.css'; as the docs suggest to bring in the stylesheet (if it's webpack/browserify based)?

[martijnrusschen]

@rafeememon's suggestion should work in this case.

[Nopzen]

@rafeememon - Works :+1: Thanks!

[ir-fuel]

Maybe this should be added to the main doc here? I stumbled on the same issue.

[rafeememon]

@ir-fuel, it's in the "Installation" example in the readme =)

[ir-fuel]

_doh_

[calbucci]

I'm having a similar problem and adding import 'react-datepicker/dist/react-datepicker.css'; to my component JSX (ES6) doesn't work. I'm using gulp to build my CSS. Any suggestion on what am I missing? I can verify the datepicker* styles are not on the built CSS.
The gulp task is this:
(notice I tried to add the full path of the datepicker.css and still didn't work)

gulp.task('build-sass', function () {
    return gulp
        .src(
            ['src/styles/**/*.scss',
            'node_modules/react-datepicker/dist/react-datepicker.css']
        )
        .pipe(sass().on('error', sass.logError))
        .on('error', notify.onError(function (err) {
              console.error(err.codeFrame ? err.codeFrame : err.message);
              return 'CSS build failed.';
        }))
        .pipe(concat('site.css'))
        .pipe(gulp.dest('site/compiled-css/'))
        .pipe(notify('✓ CSS build success.'));
});