jQuery-UI Datepicker: draggable?

Question

(उम्मीद है) सरल प्रश्न:

क्या jQuery UI Datepicker draggable बनाना संभव है? यदि हां, तो क्या कोई मुझे कुछ नमूना कोड दे सकता है?

Answer 1

$ ("। Ui-datepicker")। Draggable() काम नहीं करता है?

Answer 2

आदेश महत्वपूर्ण है।

$('#myCalendarInput').datepicker(); 
$('#ui-datepicker-div').draggable(); 

संपादित: वहाँ जवाब @JZ आपूर्ति और मेरा के बीच एक सूक्ष्म अंतर है। जेडजेड के उदाहरण का उपयोग पृष्ठ पर किसी भी डेटपिकर को खींचने योग्य होगा, यहां तक ​​कि इनलाइन (इनपुट तत्व के बजाय डीआईवी से जुड़े) भी। मेरा कोड केवल पॉपअप डेटपिकर्स ड्रैगगेबल बना देगा। डेटपिकर प्लगइन सभी पॉपअप के लिए एक एकल डीआईवी (नाम ui-datepicker-div) बनाता है और उस पृष्ठ पर किसी भी इनपुट के लिए इसका उपयोग करता है जिस पर डेटपिकर लागू किया गया है। इनलाइन डीआईवी या स्पैन के लिए यह डीआईवी/स्पैन के अंदर एक नया, अज्ञात डेटपिकर बनाता है जिसमें .ui-datepicker क्लास है, लेकिन उसका नाम नहीं है। इस मामले में, मेरा कोड डेटपिकर ड्रैगगेबल नहीं करेगा, तर्कसंगत रूप से सही व्यवहार करेगा, लेकिन जेडजेड कक्षा के आधार पर मेल खाएगा।

उदाहरण:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#calendar').datepicker(); 
    $('#calendar2').datepicker(); 
    $('#calendar3').datepicker(); 
    $('#ui-datepicker-div').draggable(); 
}); 
</script> 

<div> 
Calendar: <input id="calendar" type="text" /><br /> <-- draggable 
Calendar2: <input id="calendar2" type="text" /><br/> <-- draggable 
Fixed calendar: <div id="calendar3"></div> <-- fixed 
</div> 

Answer 3

आप datepicker में एक घटना को जोड़ने और इसका इस्तेमाल करते हैं यह खींचने योग्य बनाने के लिए कर सकते हैं।

//Add an event "onCreate" 
$.datepicker._updateDatepicker_Old = $.datepicker._updateDatepicker; 
$.datepicker._updateDatepicker = function(inst) { 
    this._updateDatepicker_Old(inst); 

    var onCreate = this._get(inst, 'onCreate'); 
    if (onCreate !== null) { 
     onCreate(inst); 
    } 
}; 

डेटपिकर को कॉल करने के बाद और फ़ंक्शन को लागू करने के बाद इसे खींचने योग्य बनाने के लिए बनाएं।

$(function() { 
    //Create datepicker 
    $('#datepicker').datepicker({ 
     onCreate: function(inst) { 
      $(inst.dpDiv).draggable(); 
     } 
    }); 
});​ 

Example jsfiddle