Datepicker befestigt, um eine input-Komponente Reagieren

Im Falle der Abwesenheit der einheitlichen <input type="date"> unterstützen, möchte ich polyfill alle Datum-Eingänge mit datepicker-widgets; zum Beispiel, jQuery-UI datepickers.

Sehen Sie die demo - hier. In Google Chrome gerendert native date-Eingänge, während in Firefox (v32.0.3) die jQuery-UI-widgets Holen Sie bereitgestellt. Das ist genau, wo ich bin ein problem. Alle manuellen änderungen in der Eingabe (Tastatur bearbeitet) bekommen, spiegelt sich in der datepicker-widget ganz gut. Aber andersrum, wenn ich wählen ein Tag in der widget-Kalender, wird der neue Wert nicht abgeholt, die durch die zugrunde liegenden Reagieren Komponente. In der demo werden Sie feststellen, dass in Chrom, auf ein Datum auswählen, das andere Datum wird automatisch angepasst. Diese Funktionalität ist gebrochen datepickers in Firefox. Reagieren, hat keine Ahnung, dass Werte sich ändern.

Folgenden diese Beratung, die ich Hinzugefügt habe,

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

meiner DateInput component-Klasse. Jedoch, es wird nie aufgerufen, die widget-Auswahl. Wie kann ich machen, damit es funktioniert?

Das gesamte nicht-komprimierten source-code der demo oben verlinkten verfügbar ist hier.

InformationsquelleAutor Ivan Krechetov | 2014-09-30
  1. 6

    Die Lösung ist dabei alles über jQuery, und nicht über die DOM-direkt:

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

    ...
};

    Kompletten source-code ist auf GitHub.

    InformationsquelleAutor Ivan Krechetov
Schreibe einen Kommentar