附加到一个React输入组件的日期选择器

Question

如果缺少本机<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.

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

    ... 
}; 

完整的源代码on GitHub.