Jeditable mit jQuery UI Datumsauswahl

Question

Ich brauche einen Klick haben Element auf einer Seite zu bearbeiten, die wiederum eine Instanz der jQuery UI Datumsauswahl aufrufen wird.

Derzeit ich Jeditable bin mit der in der direkten Bearbeitung zur Verfügung zu stellen, was in Ordnung arbeitet. Allerdings habe ich einen Datum Steuereingang, die ich erscheint als Kalender haben möchte, der ist, wo der Spaß beginnt.

Ich habe einen Kommentar in dem diesem Blog gefunden von Calle Kabo (die Seite ist ein wenig zerdrückte leider), die eine Art und Weise Details, 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"); }
            });
        }
    });

Allerdings kann ich nicht die oben arbeiten - keine Fehler, aber entweder keine Wirkung. Ich habe versucht, es in der jQuery-Dokument bereit Funktion und auch außerhalb davon platzieren -. Keine Freude

Meine UI Datepicker-Klasse ist Datumsauswahl und meine Jeditable Klasse ist ajaxedit, ich bin sicher, dass die oben Untätigkeit aufgrund der Notwendigkeit ist, sie irgendwie in dem Code zu verweisen, aber ich weiß nicht, wie. Auch die Jeditable Steuerung ist eine von vielen Element-IDs, wenn das ein Lager.

Alle Ideen, von denen mehr in dem wissen?

Answer 1

Ich hatte das gleiche Problem. Suche innerhalb der Quelltext von http://www.appelsiini.net/projects/jeditable/custom .html brachte mich auf die Lösung.

Es gibt eine "jquery.jeditable.datepicker.js". Geputtet dies in meinem Code, um eine neue Funktion „Datepicker“ (auch in der Quelle) eine gegeben.

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

  

id: 'elementID',

     

Name: 'Bearbeiten'

zum Speichern der Daten in der Datenbank.

hth:)

dabbeljuh

Answer 2

Ich habe einen Blick auf den Sourcecode oben erwähnt, aber es schien ein bisschen buggy zu sein. Ich glaube, es wurde für eine ältere Version des Datepicker entwickelt könnte, und nicht die jQuery UI Datepicker. Ich habe einige Änderungen an dem Code, und mit Änderungen, es zumindest erscheint in Firefox 3, Safari 4, Opera 9.5 und IE6 + arbeiten. Noch könnten einige Tests in anderen Browsern müssen.

Hier ist der Code, den ich verwenden (statt in einer Datei mit dem Namen 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'
});

Answer 3

Die Jeditable-picker Plugin scheint genau das zu tun, was Sie brauchen.

Es ermöglicht jQuery UI Datumsauswahl in Jeditable. Hier ist die Demo .

Answer 4

Hier ist meine Lösung. Ich benutze Format für Datum und Datumsauswahl zu schließen, ich das Eingabeformular zurückgesetzt und cssdecoration (meine Jeditable Verbesserung) gelten. 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 );
            },
    });
}});

Answer 5

Hier ist meine Lösung, aber es ist kein vollständiger Jeditable Eingabetyp.

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