Jeditable com jQuery UI DatePicker

Question

Eu preciso ter um clique para editar elemento de uma página, que, por sua vez invocar uma instância do jQuery UI DatePicker.

Atualmente, estou usando Jeditable para fornecer o no lugar de edição, o que está funcionando bem. No entanto, tenho uma entrada de controle de data que eu gostaria de ter exibido como um calendário, que é onde a diversão começa.

Eu encontrei um comentário no este blogue por Calle Kabo (a página é um pouco amassada infelizmente) que detalha a maneira de fazer isso:

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

No entanto, eu não posso fazer o mostrado acima trabalho - sem erros, mas qualquer efeito. Eu tentei colocá-lo dentro da função pronta documento jQuery e também fora dele -. Nenhuma alegria

classe Meu UI DatePicker é a data-picker e minha classe Jeditable é ajaxedit, eu tenho certeza que a inação acima é devido à necessidade de referenciá-los de alguma forma no código, mas eu não sei como. Além disso, o controle Jeditable é uma de muitas ids de elemento, se que tem um rolamento.

Todas as ideias daqueles mais que a conhecem?

Answer 1

Eu tive o mesmo problema. Procurando dentro do código fonte do http://www.appelsiini.net/projects/jeditable/custom .html me trouxe para a solução.

Há um "jquery.jeditable.datepicker.js". Botou isso no meu código de um adicionado uma nova função "datepicker" (também na fonte).

Eu não sei como o script funciona, mas no meu caso a função precisa adicionalmente:

id: 'elementID',

name: 'editar'

para armazenar os dados no banco de dados.

hth:)

dabbeljuh

Answer 2

Eu levei uma olhada no código fonte mencionado acima, mas parecia ser um pouco buggy. Eu acho que poderia ter sido projetado para uma versão mais antiga do datepicker, e não o datepicker jQuery UI. Fiz algumas modificações para o código, e com alterações, que, pelo menos, parece estar a funcionar em Fogo 3, Safari 4 Opera 9,5, e IE6 +. Ainda pode precisar de mais alguns testes em outros browsers.

Aqui está o código que usei (realizada em um arquivo chamado 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();
        });
    }
});

Exemplo de implementação do código:

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

Answer 3

O Jeditable-datepicker plug-in parece fazer exatamente o que você precisa.

Ele permite jQuery UI DatePicker em Jeditable. Aqui está o demonstração .

Answer 4

Aqui está a minha solução. I usar o formato de data personalizado e em datepicker perto, eu redefinir o formulário de entrada e aplicar cssdecoration (minha melhora Jeditable). Trabalhando com 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

Aqui está a minha solução, mas não é um 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) { }
});