Jeditable avec jQuery UI Datepicker

Question

Je dois avoir un clic pour éditer l'élément sur une page, ce qui va à son tour appeler une instance de jQuery UI Datepicker.

Actuellement, j'utilise JEditable pour fournir l'édition en place, qui fonctionne bien. Cependant, j'ai une entrée de contrôle de date que j'aimerais voir apparaître sous forme de calendrier, c'est là que le plaisir commence.

que j'ai trouvé un commentaire dans la présente blog par Calle Kabo (la page est malheureusement un peu réduites en purée) qui détaille une façon de le faire:

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

Cependant, je ne peux pas ci-dessus pour travailler - pas d'erreurs, mais pas d'effet non plus. J'ai essayé de le placer dans la fonction de prêt de document de jQuery et aussi dehors - pas de joie.

Ma classe UI Datepicker est sélecteur de date et ma classe Jeditable est ajaxedit, je suis sûr que l'inaction ci-dessus est due au besoin de les référencer d'une manière ou d'une autre dans le code, mais je ne sais pas comment. En outre, le contrôle Jeditable est l'un des nombreux identifiants d'éléments, si cela a une incidence.

Des idées de ceux qui sont plus au courant?

Answer 1

J'ai eu le même problème. La recherche dans le code source de http://www.appelsiini.net/projects/jeditable/custom.html m'a amené à la solution.

Il existe un "jquery.jeditable.datepicker.js". Putted ceci dans mon code a ajouté une nouvelle fonction "datepicker" (également dans la source).

Je ne sais pas comment fonctionne votre script, mais dans mon cas, la fonction doit en outre:

id : 'elementid',

name : 'edit'

pour stocker les données dans la base de données.

HTH :)

dabbeljuh

Answer 2

Je pris un coup d'oeil au code source mentionné ci-dessus, mais il semblait être un peu bogué. Je pense qu'il a peut-être été conçu pour une ancienne version du programme datepicker, et non pour le programme datepicker de l'interface utilisateur jQuery. J'ai apporté quelques modifications au code, et avec les changements, il semble au moins fonctionner dans Firefox 3, Safari 4, Opera 9.5 et IE6 +. Encore peut-être besoin de plus de tests dans d'autres navigateurs.

Voici le code je (tenu dans un fichier nommé 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(); 
     }); 
    } 
}); 

Exemple Code de mise en œuvre:

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

Answer 3

Voici ma solution. J'utilise un format de date personnalisé et à la fermeture de datepicker, je réinitialise le formulaire de saisie et j'applique cssdecoration (mon amélioration jeditable). Travailler avec 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

Voici ma solution, mais ce n'est pas un type d'entrée jeditable complet.

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

Le plugin jeditable-datepicker semble faire exactement ce dont vous avez besoin.

Il active jQuery UI Datepicker dans Jeditable. Voici le demo.