Jeditable con jQuery UI Datepicker

Question

Necesito hacer clic para editar el elemento en una página, que a su vez invocará una instancia del jQuery UI Datepicker.

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

He encontrado un comentario en este blog por Calle Kabo (desafortunadamente, la página está un poco machacada) que detalla una forma de hacer esto:

$.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 hacer que funcione lo anterior: no hay errores, pero tampoco ningún efecto. Intenté colocarlo dentro de la función de preparación de documentos jQuery y también fuera de él, no es un placer.

Mi clase de selector de fecha UI 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 relación.

¿Alguna idea de los más entendidos?

Answer 1

Tuve el mismo problema. Buscando dentro del código fuente de http://www.appelsiini.net/projects/jeditable/custom .html me trajo 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 script, pero en mi caso la función también necesita:

  

id: 'elementid',

     

nombre: 'editar'

para almacenar los datos en la base de datos.

hth :)

dabbeljuh

Answer 2

Eché un vistazo al código fuente mencionado anteriormente, pero parecía estar un poco defectuoso. Creo que podría haber sido diseñado para una versión anterior de datepicker, y no para 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 algunas pruebas más en otros navegadores.

Aquí está el código que usé (contenido 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();
        });
    }
});

Código de implementación de ejemplo:

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

Answer 3

El complemento jeditable-datepicker parece hacer exactamente lo que necesita.

Habilita jQuery UI Datepicker en Jeditable. Aquí está la demo .

Answer 4

Aquí está mi solución. Utilizo el formato de fecha personalizado y al cerrar el selector de fecha, restablezco el formulario de entrada y aplico cssdecoration (mi mejora editable). 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 5

Aquí está mi solución, pero no es un tipo de entrada editable 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) { }
});