रीटैक्ट इनपुट घटक से जुड़े डेटपिकर

Question

देशी <input type="date"> समर्थन की अनुपस्थिति के मामले में, मैं डेटपिकर विजेट्स के साथ सभी दिनांक इनपुट पॉलीफ़िल करना चाहता हूं; उदाहरण के लिए, jQuery UI datepickers।

डेमो here. देखें Google क्रोम में यह देशी दिनांक इनपुट प्रस्तुत करता है, जबकि फ़ायरफ़ॉक्स (v32.0.3) में jQuery UI विजेट्स को तैनात किया जाता है। यह वही है जहां मुझे कोई समस्या है। इनपुट (कीबोर्ड संपादन) में सभी मैन्युअल परिवर्तन डेटपिकर विजेट में ठीक दिखाई देते हैं। हालांकि, दूसरी तरफ, अगर मैं विजेट कैलेंडर में एक दिन का चयन करता हूं, तो नया मान अंतर्निहित प्रतिक्रिया घटक द्वारा नहीं उठाया जाता है। डेमो में आप देखेंगे कि क्रोम में, दिनांक चयन पर, दूसरी तारीख स्वतः समायोजित हो जाती है। फ़ायरफ़ॉक्स में डेटपिकर्स के लिए यह कार्यक्षमता टूटी हुई है। प्रतिक्रिया का कोई विचार नहीं है कि मूल्य बदलते हैं।

this advice के बाद, मैं अपने DateInput घटक वर्ग के लिए

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

जोड़ दिया है। हालांकि, यह कभी भी विजेट चयनों पर नहीं बुलाया जाता है। मैं इसे कैसे कारगर बना सकता हूं?

डेमो ऊपर लिंक से भरा गैर संकुचित स्रोत कोड उपलब्ध है here.

Answer 1

समाधान jQuery के ऊपर सब कुछ कर रही है, और डोम सीधे नहीं खत्म हो गया:

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.