Jeditable mit jQuery UI Datepicker

Brauche ich ein klicken Sie auf Bearbeiten, element auf einer Seite, die wiederum aufrufen eine Instanz der jQuery-UI-Datepicker.

Derzeit bin ich mit JEditable zu bieten, die in-place-Bearbeitung, die gut funktioniert. Allerdings habe ich ein date-control-Eingang, den ich haben möchte erscheint der Kalender, der ist, wo der Spaß beginnt.

Ich gefunden habe, einen Kommentar in diesem blog von Calle Kabo (die Seite ist ein wenig püriert leider), dass details ein Weg, dies zu tun:

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

Jedoch kann ich nicht die oben - ohne Fehler, aber kein Effekt. Ich habe versucht, indem Sie es innerhalb des jQuery document ready Funktion und auch außerhalb der it - keine Freude.

Meine UI-Datepicker-Klasse-Datum-picker und meine Jeditable Klasse ist ajaxedit, ich bin mir sicher, dass die oben genannten Unterlassung zurückzuführen ist, die auf Sie verweisen müssen irgendwie in den code, aber ich weiß nicht, wie. Auch die Jeditable Kontrolle ist eine von vielen element-ids, falls das Einfluss hat.

Irgendwelche Ideen, von denen mehr darüber wissen?

InformationsquelleAutor BrynJ | 2009-03-13

  1. 4

    Ich hatte das gleiche problem. Such in den Quellcode http://www.appelsiini.net/projects/jeditable/custom.html brachte mich auf die Lösung.

    Gibt es eine "jquery.jeditable.datepicker.js". Steckt diese in meinem code eine neue Funktion "datepicker" (auch in der Quelle).

    Ich weiß nicht, wie dein Skript funktioniert, aber in meinem Fall wird die Funktion benötigt zusätzlich:

    id : 'elementid',

    name : 'Bearbeiten'

    speichern der Daten in der Datenbank.

    hth 🙂

    dabbeljuh

    InformationsquelleAutor

  2. 14

    Habe ich einen Blick in den sourcecode oben erwähnt, aber es schien ein bisschen buggy. Ich denke, es könnte wurden entwickelt für eine ältere version des datepicker, und nicht den jQuery UI-datepicker. Ich machte einige änderungen an dem code, und mit änderungen, hat er zumindest scheint zu funktionieren, im Firefox 3, Safari 4, Opera 9.5 und IE6+. Muss ggf. noch einige weitere Tests in anderen Browsern.

    Hier ist der code, den ich benutzt (statt in einer Datei namens 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();
        });
    }
});

    Beispiel-Implementierung Code:

    $(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', {
     type: 'datepicker',
     tooltip: 'Double-click to edit...',
     event: 'dblclick',
     submit: 'OK',
     cancel: 'Cancel',
     width: '100px'
});
    Können Sie einige Beispiel-code online?
    Sie können auch diese datetimepicker-Erweiterung, wenn Sie Zeit brauchen, in Ihrem datepicker (ersetzen Sie einfach die 'datepicker' mit 'datetimepicker').

    InformationsquelleAutor Kirsehn

  3. 13

    Den jeditable-datepicker plugin scheint genau das zu tun, was Sie brauchen.

    Ermöglicht es jQuery UI-Datepicker in Jeditable. Hier ist die demo.

    InformationsquelleAutor qertoip

  4. 5

    Hier ist meine Lösung. Ich verwende benutzerdefinierte Datum-format und auf datepicker zu schließen, ich änder das Eingabe-Formular und bewerben Sie cssdecoration (meine jeditable Verbesserung). Arbeiten mit 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 );
            },
    });
}});
    Dies ist eigentlich die einzige, die ich gefunden habe, die für mich gearbeitet. Danke!
    Ich weiß, ich bin ein wenig spät, aber funktioniert der datepicker-cover des 'ok' und 'Abbrechen' buttons für Sie? Außerdem, wie kommst du auf das Datum, um zu bleiben in der Tabelle?
    erhielt den Fehler: missing } after property list

    InformationsquelleAutor m_ax

  5. 1

    Hier ist meine Lösung, aber nicht eine komplette jeditable input geben.

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

    InformationsquelleAutor Roberto Carrasco

Schreibe einen Kommentar