Jeditable con jQuery UI Datepicker

Ho bisogno di fare clic per modificare un elemento in una pagina, che a sua volta richiama un’istanza di jQuery UI Datepicker.

Attualmente, sto usando JEditable di fornire il luogo di editing, che sta lavorando bene. Tuttavia, ho un appuntamento di controllo ingresso di controllo che vorrei apparire come un calendario, che è dove inizia il divertimento.

Ho trovato un Commento in questo blog da Calle Kabo (la pagina è un po ‘ di puré purtroppo) che i dettagli di un modo per fare questo:

$.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 può ottenere la precedenza al lavoro senza errori, ma nessun effetto. Ho provato a collocare entro il jQuery documento pronto funzione e anche al di fuori di esso – nessuna gioia.

Mio UI Datepicker di classe è data per la selezione e il mio Jeditable classe è ajaxedit, sono sicuro che al di sopra di latitanza è dovuta alla necessità di fare riferimento a loro in qualche modo nel codice, ma non so come. Inoltre, il Jeditable di controllo è uno dei tanti elemento id, se è un cuscinetto.

Tutte le idee, da quelle più lo sa?

InformationsquelleAutor BrynJ | 2009-03-13

 

5 Replies
  1. 4

    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”. Messo questo nel mio codice aggiunto una nuova funzione “datepicker” (anche in origine).

    Non so come il tuo script funziona, ma nel mio caso la funzione, inoltre, deve:

    id : ‘elementid’,

    nome : ‘modifica’

    per memorizzare i dati nel database.

    hth 🙂

    dabbeljuh

  2. 14

    Ho dato un’occhiata al codice sorgente di cui sopra, ma sembrava un po ‘ strano. Penso che potrebbe essere stato progettato per una versione precedente del datepicker, e non jQuery UI datepicker. Ho fatto alcune modifiche al codice, e con le modifiche, almeno sembra funzionare in Firefox 3, Safari 4, Opera 9.5, e IE6+. Ancora potrebbe essere necessario un po ‘ di prove con altri browser.

    Qui è il codice che ho usato (tenuto in un file denominato 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 Di Implementazione Di Codice:

    $(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', {
         type: 'datepicker',
         tooltip: 'Double-click to edit...',
         event: 'dblclick',
         submit: 'OK',
         cancel: 'Cancel',
         width: '100px'
    });
    • È inoltre possibile utilizzare questo datetimepicker estensione se avete bisogno di tempo nella vostra datepicker (basta sostituire il ‘datepicker’ con ‘datetimepicker’).
  3. 5

    Ecco la mia soluzione. Io uso un formato di data personalizzato e su datepicker vicino, ho resettato il modulo di ingresso e di applicare cssdecoration (il mio jeditable di miglioramento). 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 );
                },
        });
    }});
    • Questo è in realtà l’unico che ho trovato che ha funzionato per me. Grazie!
    • So che sono un po ‘ in ritardo, ma fa il datepicker di copertura ‘ok’ e ‘annulla’ per voi? Inoltre, come si fa a ottenere la data di rimanere nella tabella?
  4. 1

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

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

Lascia un commento