React 입력 컴포넌트에 연결된 Datepicker

Question

native <input type="date"> 지원이 없으면 datepicker 위젯으로 모든 날짜 입력을 polyfill하고 싶습니다. 예 : jQuery UI datepickers.

데모보기 here. Google 크롬에서는 기본 날짜 입력을 렌더링하고 Firefox (v32.0.3)에서는 jQuery UI 위젯을 배포합니다. 그게 바로 제가 문제가있는 곳입니다. 입력의 모든 수동 변경 (키보드 편집)은 datepicker widget에 잘 반영됩니다. 그러나 위젯 캘린더에서 하루를 선택하면 새로운 값은 기본 React 구성 요소에 의해 선택되지 않습니다. 데모에서는 Chrome에서 날짜 선택에 따라 다른 날짜가 자동 조정된다는 것을 알 수 있습니다. 파이어 폭스에서 datepickers에 대한 기능이 깨졌습니다. React는 값이 변하는 것을 전혀 모릅니다.

this advice에 따라, 나는 나의 DateInput 구성 요소 클래스에

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

을 추가했습니다. 그러나 위젯을 선택할 때 결코 호출되지 않습니다. 어떻게 작동시킬 수 있습니까?

위에 링크 된 데모의 전체 비 압축 소스 코드를 사용할 수 있습니다 here.

Answer 1

이 솔루션은 jQuery를 통해 모든 일을, 그리고 직접 DOM 이상 :

이

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

    ... 
}; 

완전한 소스 코드는 on GitHub.