最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Datepicker attached to a React input component - Stack Overflow

programmeradmin7浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 6

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({
    ...

    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.

发布评论

评论列表(0)

  1. 暂无评论