Datepicker attached to a React input component

Question

In case of absence of native <input type="date"> support, I'd like to polyfill all the date inputs with datepicker widgets; for example, jQuery UI datepickers.

See the demo here. In Google Chrome it renders native date inputs, while in Firefox (v32.0.3) the jQuery UI widgets get deployed. That's exactly where I'm having a problem. All the manual changes in the input (keyboard edits) get reflected in the datepicker widget just fine. However, the other way around, if I select a day in the widget calendar, the new value doesn't get picked up by the underlying React component. In the demo you'll notice that in Chrome, on a date selection, the other date gets auto-adjusted. That functionality is broken for datepickers in Firefox. React has no idea that values change.

Following this advice, I've added

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

to my DateInput component class. However, it never gets called on widget selections. How can I make it work?

The full non-compressed source code of the demo linked above is available here.

Answer 1

The solution is doing everything over jQuery, and not over 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();
        }
    }

    ...
};

The complete source code is on GitHub.