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 ponent. 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
ponentDidMount: function(e) {
this.getDOMNode().addEventListener(
'change',
function (e) { console.dir(e); }
);
},
to my DateInput
ponent class. However, it never gets called on widget selections. How can I make it work?
The full non-pressed source code of the demo linked above is available here.
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 ponent. 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
ponentDidMount: function(e) {
this.getDOMNode().addEventListener(
'change',
function (e) { console.dir(e); }
);
},
to my DateInput
ponent class. However, it never gets called on widget selections. How can I make it work?
The full non-pressed source code of the demo linked above is available here.
Share Improve this question edited Sep 30, 2014 at 13:35 Ivan Krechetov asked Sep 30, 2014 at 12:59 Ivan KrechetovIvan Krechetov 19.2k8 gold badges51 silver badges61 bronze badges1 Answer
Reset to default 6The solution is doing everything over jQuery, and not over the DOM directly:
var isPolyfilled = function () {
return (window && window.$ && window.$.datepicker);
};
module.exports = React.createClass({
...
ponentDidMount: function () {
setTimeout(function () {
if (isPolyfilled()) {
window.$(this.getDOMNode()).datepicker();
window.$(this.getDOMNode()).on('change', this.handleEdit);
}
}.bind(this), 500);
},
ponentWillUnmount: function () {
if (isPolyfilled()) {
window.$(this.getDOMNode()).off();
}
}
...
};
The plete source code is on GitHub.