Jeditable con jQuery UI Datepicker

Question

Ho bisogno di avere un clic per modificare l'elemento su una pagina, che a sua volta invocherà un'istanza del Datepoint di jQuery UI.

Attualmente, sto usando JEditable per fornire la modifica sul posto, che funziona bene. Tuttavia, ho un input di controllo della data che mi piacerebbe apparire come un calendario, che è dove inizia il divertimento.

ho trovato un commento nella presente blog da Calle Kabo (la pagina è un po 'schiacciata purtroppo) che descrive un modo per farlo:

$.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"); } 
      }); 
     } 
    }); 

Tuttavia, non posso ottenere quanto sopra lavorare - nessun errore, ma nessun effetto neanche. Ho provato a collocarlo all'interno della funzione ready del documento jQuery e anche al di fuori di esso - nessuna gioia.

La mia classe UI Datepicker è data-picker e la mia classe Jeditable è ajaxedit, sono sicuro che la suddetta inazione è dovuta alla necessità di farvi riferimento in qualche modo nel codice, ma non so come. Inoltre, il controllo Jeditable è uno dei tanti id di elemento, se questo ha un significato.

Qualche idea da quelli più in conoscenza?

Answer 1

Ho avuto lo stesso problema. La ricerca all'interno del codice sorgente di http://www.appelsiini.net/projects/jeditable/custom.html mi ha portato alla soluzione.

C'è un "jquery.jeditable.datepicker.js". Inserito questo nel mio codice ha aggiunto una nuova funzione "datepicker" (anche nella fonte).

Non so come funziona lo script, ma nel mio caso ha bisogno in aggiunta la funzione:

id : 'elementid',

name : 'edit'

per memorizzare i dati nel database.

hth :)

dabbeljuh

Answer 2

ho preso uno sguardo al codice sorgente di cui sopra, ma sembrava di essere un po 'buggy. Penso che potrebbe essere stato progettato per una versione precedente di DatePicker, e non per il Datepicker dell'interfaccia utente jQuery. Ho apportato alcune modifiche al codice e, con le modifiche, almeno sembra funzionare in Firefox 3, Safari 4, Opera 9.5 e IE6 +. Potrebbero essere necessari altri test in altri browser.

Ecco il codice che ho usato (tenuto in un file chiamato 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(); 
     }); 
    } 
}); 

Esempio codice di implementazione:

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

Answer 3

Ecco la mia soluzione. Io uso il formato data personalizzato e su datepicker close, ho resettato il modulo di input e applicato cssdecoration (il mio miglioramento jeditable). Lavorare con jQuery UI 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

Ecco la mia soluzione, ma non è un tipo completo di ingresso jeditable.

$.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

Il jeditable-datepicker plug sembra fare esattamente quello che ti serve.

Abilita jQuery UI Datepicker in Jeditable. Ecco lo demo.