Datepicker collegato a un componente di input React

Question

In caso di assenza del supporto nativo <input type="date">, desidero eseguire il polyfill di tutti gli input di data con i widget datepicker; ad esempio, jQuery UI datepickers.

Vedere la demo here. In Google Chrome esegue il rendering degli input di data nativi, mentre in Firefox (v32.0.3) i widget dell'interfaccia utente jQuery vengono distribuiti. È esattamente dove sto avendo un problema. Tutte le modifiche manuali nell'input (modifiche della tastiera) vengono riflesse nel widget DatePicker. Tuttavia, al contrario, se seleziono un giorno nel calendario del widget, il nuovo valore non viene rilevato dal componente React sottostante. Nella demo noterai che in Chrome, in una selezione data, l'altra data viene regolata automaticamente. Quella funzionalità è rotta per datepicker in Firefox. Reagire non ha idea che i valori cambino.

seguito this advice, ho aggiunto

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

alla mia DateInput classe del componente. Tuttavia, non viene mai chiamato per le selezioni del widget. Come posso farlo funzionare?

Il codice sorgente non compressa completa della demo linkato sopra è disponibile here.

Answer 1

La soluzione sta facendo tutto su jQuery, e non sopra il DOM direttamente:

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

    ... 
}; 

Il codice sorgente completo è on GitHub.