jQuery यूआई डेटपिकर

Question

के साथ जेडटेबल मुझे पृष्ठ पर तत्व संपादित करने के लिए एक क्लिक होना चाहिए, जो बदले में jQuery UI Datepicker का एक उदाहरण पेश करेगा।

वर्तमान में, मैं जगह संपादन को प्रदान करने के लिए जेडडेबल का उपयोग कर रहा हूं, जो ठीक काम कर रहा है। हालांकि, मेरे पास डेट कंट्रोल इनपुट है जो मैं कैलेंडर के रूप में दिखाना चाहता हूं, जहां मजा शुरू होता है।

$.editable.addInputType("datepicker", { 
     element: function(settings, original) { 
      var input = $("<input type=\"text\" name=\"value\" />"); 
      $(this).append(input); 
      return(input); 
     }, 
     plugin: function(settings, original) { 
      var form = this; 
      $("input", this).filter(":text").datepicker({ 
       onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); } 
      }); 
     } 
    }); 

हालांकि, मैं ऊपर नहीं मिल सकता है:

मैं इस blog में एक टिप्पणी कल्ले Kabo (पेज एक छोटे से मसला हुआ दुर्भाग्य है) कि यह करने के लिए एक तरह से विवरण द्वारा मिल गया है काम करने के लिए - कोई त्रुटि नहीं, लेकिन कोई प्रभाव नहीं। मैंने इसे jQuery दस्तावेज़ तैयार फ़ंक्शन के भीतर और इसके बाहर भी रखने की कोशिश की है - कोई खुशी नहीं।

मेरा यूआई डेटपिकर क्लास डेट-पिकर है और मेरी जेडटेबल क्लास AJAXedit है, मुझे यकीन है कि उपर्युक्त निष्क्रियता किसी भी तरह कोड में संदर्भित करने की आवश्यकता के कारण है, लेकिन मुझे नहीं पता कि कैसे। इसके अलावा, जेडटेबल नियंत्रण कई तत्व आईडी में से एक है, अगर इसका असर होता है।

उन लोगों से किसी भी विचार को जानने में?

Answer 1

मुझे एक ही समस्या थी। http://www.appelsiini.net/projects/jeditable/custom.html के स्रोत कोड के अंदर खोजने से मुझे समाधान में लाया गया।

एक "jquery.jeditable.datepicker.js" है। इसे मेरे कोड में रखकर एक नया फ़ंक्शन "डेटपिकर" (स्रोत में भी) जोड़ा गया।

मैं नहीं पता है कि कैसे अपनी स्क्रिप्ट काम करता है लेकिन मेरे मामले में समारोह अतिरिक्त जरूरत:

id : 'elementid',

name : 'edit'

डेटाबेस में डेटा स्टोर करने के लिए।

hth :)

dabbeljuh

Answer 2

मैं sourcecode पर एक नज़र ऊपर उल्लेख लिया, लेकिन यह थोड़ा गाड़ी लग रहा था। मुझे लगता है कि यह डेटपिकर के पुराने संस्करण के लिए डिज़ाइन किया गया हो सकता है, न कि jQuery UI डेटपिकर। मैंने कोड में कुछ संशोधन किए हैं, और परिवर्तनों के साथ, यह कम से कम फ़ायरफ़ॉक्स 3, सफारी 4, ओपेरा 9.5, और आईई 6 + में काम कर रहा प्रतीत होता है। फिर भी अन्य ब्राउज़रों में कुछ और परीक्षण की आवश्यकता हो सकती है।

यहाँ कोड मैं प्रयोग किया जाता है (एक फ़ाइल में आयोजित नामित jquery.jeditable.datepicker.js)

$.editable.addInputType('datepicker', { 
    element : function(settings, original) { 
     var input = $('<input>'); 
     if (settings.width != 'none') { input.width(settings.width); } 
     if (settings.height != 'none') { input.height(settings.height); } 
     input.attr('autocomplete','off'); 
     $(this).append(input); 
     return(input); 
    }, 
    plugin : function(settings, original) { 
     /* Workaround for missing parentNode in IE */ 
     var form = this; 
     settings.onblur = 'ignore'; 
     $(this).find('input').datepicker().bind('click', function() { 
      $(this).datepicker('show'); 
      return false; 
     }).bind('dateSelected', function(e, selectedDate, $td) { 
      $(form).submit(); 
     }); 
    } 
}); 

उदाहरण कार्यान्वयन कोड:

$(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', { 
    type: 'datepicker', 
    tooltip: 'Double-click to edit...', 
    event: 'dblclick', 
    submit: 'OK', 
    cancel: 'Cancel', 
    width: '100px' 
}); 

Answer 3

यहाँ मेरी समाधान है। मैं कस्टम डेट प्रारूप का उपयोग करता हूं और डेटपिकर पर बंद करता हूं, मैं इनपुट फॉर्म रीसेट करता हूं और cssdecoration (मेरा jeditable सुधार) लागू करता हूं। JQuery यूआई 1.5.2

$.editable.addInputType('datepicker', { 
element : function(settings, original) { 
    var input = $('<input>'); 
    if (settings.width != 'none') { input.width(settings.width); } 
    if (settings.height != 'none') { input.height(settings.height); } 
    input.attr('autocomplete','off'); 
    $(this).append(input); 
    return(input); 
}, 
plugin : function(settings, original) { 
    /* Workaround for missing parentNode in IE */ 
    var form = this; 
    settings.onblur = 'ignore'; 
    $(this).find('input').datepicker({ 
     firstDay: 1, 
     dateFormat: 'dd/mm/yy', 
     closeText: 'X', 
     onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }, 
     onClose: function(dateText) { 
      original.reset.apply(form, [settings, original]); 
      $(original).addClass(settings.cssdecoration); 
      }, 
    }); 
}}); 

Answer 4

यहां मेरा समाधान है, लेकिन यह एक पूर्ण जेडटेबल इनपुट प्रकार नहीं है।

$.editable.addInputType('date', { 
    element : function(settings, original) { 
     var input = $('<input type="text" readonly="readonly" name="value" size="10 />'); 
     $(this).append(input); 
     return(input); 
    }, 
    plugin : function(settings, original) { 
     var form = this; 
     settings.onblur = 'cancel'; 
     $(this).find('input').datepicker({ 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }, 
      onClose: function(dateText) { $(this).hide(); $(form).trigger("submit");} 
     });    
    }, 
    submit : function(settings, original) { }, 
    reset : function(settings, original) { } 
}); 

Answer 5

jeditable-datepicker प्लगइन आपको वही करना है जो आपको चाहिए।

यह जेडियेट में jQuery यूआई डेटपिकर को सक्षम बनाता है। यहां demo है।