没有初始值的反应日期选择器
react-datepicker with no initial value
我开始使用 react-datepicker 组件。
https://github.com/Hacker0x01/react-datepicker
我得到了例子运行,现在我想修改它没有初始值。
示例代码如下:
<script type="text/javascript">
var container = document.querySelector('#datepicker-container');
var exampleComponent = React.createClass({
displayName: 'exampleComponent',
getInitialState: function() {
return {
start_date: moment(),
};
},
handleStartDateChange: function(date) {
this.setState({
start_date: date
});
},
render: function() {
return React.DOM.div({}, [
DatePicker({
key: 'example1',
selected: this.state.start_date,
onChange: this.handleStartDateChange
}),
]);
}
})
React.renderComponent(exampleComponent(), container);
</script>
我尝试使用 selected: none
甚至不使用 selected
,但随后出现以下错误:
TypeError: newProps.date is null
value: newProps.date.format(this.props.dateFormat)
我也查看了源代码,但没有发现任何以空日期开始的可能性。
预先感谢您的帮助!
您应该可以通过在 getInitialState
、
中设置 start_date: null
来实现您想要的效果
或者,如果您使用 react-datepicker 中的示例 3,您可以像这样定义一个函数:
handleResetDate: function() {
this.setState({
new_date: null
});
},
,并在需要重置日期时调用它。
希望这对您有所帮助!
我开始使用 react-datepicker 组件。 https://github.com/Hacker0x01/react-datepicker
我得到了例子运行,现在我想修改它没有初始值。 示例代码如下:
<script type="text/javascript">
var container = document.querySelector('#datepicker-container');
var exampleComponent = React.createClass({
displayName: 'exampleComponent',
getInitialState: function() {
return {
start_date: moment(),
};
},
handleStartDateChange: function(date) {
this.setState({
start_date: date
});
},
render: function() {
return React.DOM.div({}, [
DatePicker({
key: 'example1',
selected: this.state.start_date,
onChange: this.handleStartDateChange
}),
]);
}
})
React.renderComponent(exampleComponent(), container);
</script>
我尝试使用 selected: none
甚至不使用 selected
,但随后出现以下错误:
TypeError: newProps.date is null
value: newProps.date.format(this.props.dateFormat)
我也查看了源代码,但没有发现任何以空日期开始的可能性。 预先感谢您的帮助!
您应该可以通过在 getInitialState
、
start_date: null
来实现您想要的效果
或者,如果您使用 react-datepicker 中的示例 3,您可以像这样定义一个函数:
handleResetDate: function() {
this.setState({
new_date: null
});
},
,并在需要重置日期时调用它。
希望这对您有所帮助!