如果缺少原生<input type="date">
支持,我想用datepicker小部件填充所有日期输入;例如,jQuery UI datepickers。
查看演示here.在Google Chrome中,它会呈现原生日期输入,而在Firefox(v32.0.3)中,jQuery UI小部件会被部署。这正是我遇到问题的地方。输入中的所有手动更改(键盘编辑)都会很好地反映在datepicker小部件中。但是,反过来说,如果我在窗口小部件日历中选择一天,则新值不会被底层的React组件拾取。在演示中,您会注意到在Chrome中,在日期选择中,另一个日期会自动调整。 Firefox中的datepickers打破了这个功能。 React不知道价值会发生变化。
关注this advice后,我添加了
componentDidMount: function(e) {
this.getDOMNode().addEventListener(
'change',
function (e) { console.dir(e); }
);
},
到我的DateInput
组件类。但是,它永远不会被调用小部件选择。我怎样才能使它发挥作用?
上面链接的演示的完整非压缩源代码可用here.
答案 0 :(得分:5)
解决方案是通过jQuery完成所有工作,而不是直接通过DOM:
var isPolyfilled = function () {
return (window && window.$ && window.$.datepicker);
};
module.exports = React.createClass({
...
componentDidMount: function () {
setTimeout(function () {
if (isPolyfilled()) {
window.$(this.getDOMNode()).datepicker();
window.$(this.getDOMNode()).on('change', this.handleEdit);
}
}.bind(this), 500);
},
componentWillUnmount: function () {
if (isPolyfilled()) {
window.$(this.getDOMNode()).off();
}
}
...
};
完整的源代码是on GitHub.