Calendar is not displaying correctly using flatpickr

Question

I installed flatpickr by npm install flatpickr. Calender is displaying like when click on input control

var React = require('React');
var ReactDOM = require('ReactDOM');
var Flatpickr = require('flatpickr');

var Calender = React.createClass({

    componentDidMount: function(){
    this.flatpickr = new Flatpickr(this.refs.date, {dateFormat: "m/d/Y"});
    },

    render: function() {
        return(
                <div>            
                    <input data-enable-time defaultValue='2016-11-11' ref="date_from" />    
                </div>
             );
    }
});

score 28 · Accepted Answer · edited Jan 17 '17 at 00:09

28

I know its been a long time but- You need to add the link to the CSS file.

In your SCSS file:

@import '../node_modules/flatpickr/dist/flatpickr.min.css';

It's the first line in the the docs example:
https://github.com/coderhaoxin/react-flatpickr
(When I used it I found that the css file name in the example was different than what I had, so double check that in your node_modules.)

Hope that helped.

edited Jan 17 '17 at 00:09

zx485

28,498
28
50
59

answered Jan 16 '17 at 23:40

Bud Anin- Aminof

563
5
10

1

I am facing the same issue and the answer seems not working for me, as it's 2 years old, is there another fix? – johan Mar 12 '19 at 00:01
Thanks a lot. Working on a system developed by someone else. I totally forgot to add the css in a new template and spend around 3 hours :( – Ariful Haque Mar 14 '19 at 07:08
1

In my case it was solved with `@import 'flatpickr/dist/flatpickr.css';` – Mauricio Gracia Gutierrez Mar 31 '22 at 00:19
If you are using vuexy then this will work `import "@styles/react/libs/flatpickr/flatpickr.scss";` – Ikram Khizer Oct 12 '22 at 10:17

Calendar is not displaying correctly using flatpickr

1 Answers1

Linked