使用flatpickr无法正确显示日历

时间:2016-12-06 20:40:13

标签: node.js reactjs flatpickr

我通过npm install flatpickr安装了flatpickr。当点击输入控件enter image description here

时,日历就会显示
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>
             );
    }
});

1 个答案:

答案 0 :(得分:8)

我知道它已经很长时间但是 - 您需要添加CSS文件的链接。

在您的SCSS文件中:

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

它是文档示例中的第一行:
https://github.com/coderhaoxin/react-flatpickr
(当我使用它时,我发现示例中的css文件名与我的不同,所以请在node_modules中仔细检查。)

希望有所帮助。