Jeditable con jQuery UI Datepicker

Question

Necesito tener un elemento de clic para editar en una página, que a su vez invocará una instancia de jQuery UI Datepicker.

Actualmente, estoy usando JEditable para proporcionar la edición in situ, que está funcionando bien. Sin embargo, tengo una entrada de control de fecha que me gustaría que aparezca como un calendario, que es donde comienza la diversión.

he encontrado un comentario en el presente blog de Calle Kabo (la página es un poco de puré por desgracia) que detalla una forma de hacerlo:

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

Sin embargo, no puedo conseguir lo anterior para trabajar, sin errores, pero sin efecto tampoco. Intenté ubicarlo dentro de la función de documento jQuery listo y también fuera de él, sin alegría.

Mi UI clase Datepicker es selector de fecha y mi clase Jeditable es ajaxedit, estoy seguro de que la inacción anterior se debe a la necesidad de hacer referencia a ellos de alguna manera en el código, pero no sé cómo. Además, el control Jeditable es uno de los muchos identificadores de elementos, si eso tiene una incidencia.

¿Alguna idea de los más informados?

Answer 1

Tuve el mismo problema. La búsqueda dentro del código fuente de http://www.appelsiini.net/projects/jeditable/custom.html me llevó a la solución.

Hay un "jquery.jeditable.datepicker.js". Puse esto en mi código y agregué una nueva función "datepicker" (también en la fuente).

No sé cómo funciona su guión, pero en mi caso, además, la función de las necesidades:

id : 'elementid',

name : 'edit'

para almacenar los datos en la base de datos.

HTH :)

dabbeljuh

Answer 2

Me tomó un vistazo al código fuente se ha mencionado anteriormente, pero parecía ser un poco buggy. Creo que podría haber sido diseñado para una versión anterior del datepicker, y no para el jQuery UI datepicker. Hice algunas modificaciones al código, y con los cambios, al menos parece estar funcionando en Firefox 3, Safari 4, Opera 9.5 e IE6 +. Todavía podría necesitar más pruebas en otros navegadores.

Aquí está el código que utilicé (que tuvo lugar en un archivo llamado 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(); 
     }); 
    } 
}); 

Ejemplo código de implementación:

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

Answer 3

Aquí está mi solución. Utilizo el formato de fecha personalizado y el cierre de fecha, reinicio el formulario de entrada y aplico cssdecoration (mi mejora jeditable). Trabajando 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

Aquí está mi solución, pero no es un tipo de entrada jeditable completa.

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

El plug-in jeditable-datepicker parece hacer exactamente lo que necesita.

Permite jQuery UI Datepicker en Jeditable. Aquí está el demo.