Datepicker bound to React input component

Question

In the absence of built-in support for <input type="date"> I would like to polyfill all date entries with datepicker widgets; e.g. jQuery UI datepickers .

See the demo here. In Google Chrome, it displays input source data, while in Firefox (v32.0.3) jQuery UI widgets are deployed. This is exactly where I have the problem. All manual input changes (keyboard changes) are reflected in datepicker widgets just fine. However, on the contrary, if I select a day in the widget calendar, the new value will not be picked up by the core React component. In the demo, you will notice that in Chrome, when you select a date, another date is automatically set. This feature is broken for datepickers in Firefox. The reaction does not know that the values ​​are changing.

Following these tips , I added

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

for my DateInput component DateInput . However, it is never called when a widget is selected. How can I make it work?

The full uncompressed source code for the above demo is available here.

Answer 1

The solution does everything in jQuery, not in the DOM directly:

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

Full source code on GitHub.