Datepicker được gắn vào thành phần đầu vào React

Question

Trong trường hợp không có hỗ trợ gốc <input type="date">, tôi muốn chèn sẵn tất cả các mục nhập ngày tháng với tiện ích con ngày tháng; ví dụ: jQuery UI datepickers.

Xem bản giới thiệu here. Trong Google Chrome, nó hiển thị ngày đầu vào gốc, trong khi trong Firefox (v32.0.3) tiện ích con giao diện người dùng jQuery được triển khai. Đó chính xác là nơi tôi đang gặp vấn đề. Tất cả các thay đổi thủ công trong đầu vào (chỉnh sửa bàn phím) được phản ánh trong tiện ích con của trình chỉnh sửa ngày tháng. Tuy nhiên, theo cách khác, nếu tôi chọn một ngày trong lịch widget, giá trị mới sẽ không được chọn bởi thành phần React bên dưới. Trong bản trình diễn, bạn sẽ thấy rằng trong Chrome, trong một lựa chọn ngày, ngày khác sẽ được tự động điều chỉnh. Chức năng đó bị hỏng cho trình duyệt ngày trong Firefox. Phản ứng không có ý tưởng rằng giá trị thay đổi.

Sau this advice, tôi đã thêm

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

để DateInput lớp thành phần của tôi. Tuy nhiên, nó không bao giờ được gọi là lựa chọn widget. Làm thế nào tôi có thể làm cho nó hoạt động?

Mã nguồn phi nén đầy đủ các bản demo liên kết ở trên có sẵn here.

Answer 1

Giải pháp đang làm tất cả mọi thứ trên jQuery, và chưa kết thúc DOM trực tiếp:

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

    ... 
}; 

Các mã nguồn hoàn chỉnh là on GitHub.