Datepicker附加到React输入组件

Question

如果没有本机<input type="date">支持,我想用datepicker小部件填充所有日期输入; 例如,jQuery UI datepickers.

请在此处查看演示.在谷歌浏览器中,它呈现原生日期输入,而在Firefox(v32.0.3)中,jQuery UI小部件将被部署.这正是我遇到问题的地方.输入中的所有手动更改(键盘编辑)都会很好地反映在datepicker小部件中.但是,反过来说,如果我在窗口小部件日历中选择一天,则新值不会被底层的React组件拾取.在演示中,您会注意到在Chrome中,在日期选择中,另一个日期会自动调整.Firefox中的datepickers打破了这个功能.React不知道价值观会发生变化.

遵循这个建议,我补充道

componentDidMount: function(e) {
    this.getDOMNode().addEventListener(
        'change',
        function (e) { console.dir(e); }
    );
},

到我的DateInput组件类.但是,它永远不会被调用小部件选择.我怎样才能使它工作？

上面链接的演示的完整非压缩源代码可在此处获得.

Answer 1

解决方案是通过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();
        }
    }

    ...
};

完整的源代码在GitHub上.