使用flatpickr无法正确显示日历 [英] Calendar is not displaying correctly using flatpickr

问题描述

我通过npm install flatpickr安装了flatpickr.日历显示就像单击输入控件时一样

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>
             );
    }
});

推荐答案

我知道已经很长时间了，但是- 您需要将链接添加到CSS文件.

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

在您的SCSS文件中:

In your SCSS file:

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

这是docs示例中的第一行:
https://github.com/coderhaoxin/react-flatpickr
(当我使用它时，我发现示例中的css文件名与我使用的文件名不同，因此请在您的node_modules中再次检查该文件名.)

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

希望有帮助.

这篇关于使用flatpickr无法正确显示日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！