Jeditable с jQuery UI Datepicker

Question

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

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

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

$.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

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

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

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

id : 'elementid',

name : 'edit'

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

НТН :)

dabbeljuh

Answer 2

Я взял взгляд на исходный код уже упоминалось выше, но это казалось немного глючит. Я думаю, что это могло быть спроектировано для более старой версии datepicker, а не для jQuery UI datepicker. Я внесла некоторые изменения в код и с изменениями, по крайней мере, по-видимому, работает в 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 3

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

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

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

Answer 5

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

Он позволяет использовать jQuery UI Datepicker в Jeditable. Вот demo.