Jeditable с jQuery UI Datepicker
Следуя их примеру, для каждой строки они обернули содержимое слева и справа, каждый в элементы div, для которых установлено inline-block. Вот так:
.left,
.right {
display: inline-block;
width: 45%;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
input {
margin: 5px;
}<div class="left">
<label id="name-label" for="name">Name:</label>
</div>
<div class="right">
<input type="name" id="name" required placeholder="Name" />
</div>
<div class="left">
<label id="email-label" for="email">Email:</label>
</div>
<div class="right">
<input type="email" id="email" required placeholder="Email" />
</div>4 ответа
У меня была та же проблема. Поиск в исходном коде http://www.appelsiini.net/projects/jeditable/custom.html принес мне к решению.
Существует "jquery.jeditable.datepicker.js". Загнанный это в моем коде добавленное новая функция "datepicker" (также в источнике).
Я не знаю, как Ваш сценарий работает, но в моем случае для функции дополнительно нужно:
идентификатор: 'elementid',
имя: 'редактирование'
хранить данные в базе данных.
hth :)
dabbeljuh
Я просмотрел исходный код, упомянутый выше, но он показался немного ошибочным. Я думаю, он мог быть разработан для более старой версии datepicker, а не для datepicker 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'
});
Вот мое решение. Я использую настраиваемый формат даты и при закрытии datepicker сбрасываю форму ввода и применяю 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 );
},
});
}});
Вот мое решение, но не является полным дневным типом ввода.
$.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) { }
});