日历不能正确显示使用flatpickr

我通过npm install flatpickr安装了flatpickr。 日历显示就像点击input控件时一样

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

Answer 1

我知道它很长一段时间，但你需要添加链接到CSS文件。

在你的SCSS文件中：

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

这是文档示例中的第一行：
https://github.com/coderhaoxin/react-flatpickr
（当我使用它的时候，我发现这个例子中的css文件名与我所使用的不同，所以仔细检查一下你的node_modules。）

希望有所帮助。