使用 flatpickr 无法正确显示日历
Calendar is not displaying correctly using flatpickr
我通过 npm install flatpickr 安装 flatpickr。单击输入控件时日历显示为
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>
);
}
});
我知道已经很久了但是-
您需要将 link 添加到 CSS 文件。
在您的 SCSS 文件中:
@import '../node_modules/flatpickr/dist/flatpickr.min.css';
这是文档示例中的第一行:
https://github.com/coderhaoxin/react-flatpickr
(当我使用它时,我发现示例中的 css 文件名与我的不同,因此请仔细检查您的 node_modules。)
希望对您有所帮助。
我通过 npm install flatpickr 安装 flatpickr。单击输入控件时日历显示为
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>
);
}
});
我知道已经很久了但是- 您需要将 link 添加到 CSS 文件。
在您的 SCSS 文件中:
@import '../node_modules/flatpickr/dist/flatpickr.min.css';
这是文档示例中的第一行:
https://github.com/coderhaoxin/react-flatpickr
(当我使用它时,我发现示例中的 css 文件名与我的不同,因此请仔细检查您的 node_modules。)
希望对您有所帮助。