Jeditable с помощью jQuery UI Datepicker

Question

Мне нужно щелкнуть, чтобы отредактировать элемент на странице, что, в свою очередь, вызовет экземпляр jQuery UI Datepicker.

В настоящее время я использую JEditable для обеспечения редактирования на месте, которое работает нормально. Тем не менее, у меня есть элемент управления датой, который я хотел бы видеть в виде календаря, с которого начинается самое интересное.

Я нашел комментарий в этом блоге Калле Кабо (страница, к сожалению, немного разбита), в котором подробно описан способ сделать это:

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

Однако я не могу заставить работать вышеперечисленное - никаких ошибок, но и никакого эффекта. Я попытался поместить его в функцию готовности документа jQuery, а также за ее пределами - без радости.

Мой класс пользовательского интерфейса Datepicker - это средство выбора даты, а мой класс Jeditable - ajaxedit, я уверен, что указанное выше бездействие связано с необходимостью ссылаться на них в коде, но я не знаю как. Кроме того, элемент управления Jeditable является одним из множества идентификаторов элементов, если он имеет отношение.

Есть идеи от тех, кто в курсе?

Answer 1

Я посмотрел на исходный код, упомянутый выше, но он казался немного глючным. Я думаю, что это могло быть разработано для более старой версии средства выбора даты, а не средства выбора даты jQuery UI. Я сделал некоторые изменения в коде, и с изменениями он, по крайней мере, работает в Firefox 3, Safari 4, Opera 9.5 и IE6 +. Тем не менее, может потребоваться дополнительное тестирование в других браузерах.

Вот код, который я использовал (содержится в файле с именем 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();
        });
    }
});

Пример кода реализации:

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

Answer 2

Плагин jeditable-datepicker , кажется, делает именно то, что вам нужно.

Включает jQuery UI Datepicker в Jeditable. Вот демоверсия .

Answer 3

Вот мое решение. Я использую пользовательский формат даты и при закрытии DatePicker, я сбрасываю форму ввода и применяю cssdecoration (мое jeditable улучшение). Работа с пользовательским интерфейсом jQuery 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 4

У меня была такая же проблема. Поиск внутри исходного кода http://www.appelsiini.net/projects/jeditable/custom.html привел меня к решению.

Существует "jquery.jeditable.datepicker.js". Поместил это в мой код и добавил новую функцию "DatePicker" (также в источнике).

Я не знаю, как работает ваш скрипт, но в моем случае функция дополнительно нуждается в:

id: 'elementid',

name: 'edit'

для хранения данных в базе данных.

чч:)

dabbeljuh

Answer 5

Вот мое решение, но не полный jeditable тип ввода.

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