![](/img/trans.png)
[英]Jeditable and jQuery UI Datepicker onblur cancel not working with showOn button option
[英]Jeditable with jQuery UI Datepicker
我需要在页面上单击编辑元素,然后调用jQuery UI Datepicker的实例。
目前,我正在使用JEditable提供就地编辑,这工作正常。 但是,我有一个日期控制输入,我希望它显示为日历,这是乐趣开始的地方。
我在Calle Kabo的这个博客中找到了一条评论(遗憾的是这个页面有点捣碎),详细说明了这样做的方法:
$.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文档就绪函数中,并且也在它之外 - 没有乐趣。
我的UI Datepicker类是日期选择器,我的Jeditable类是ajaxedit,我确定上面的不作为是由于需要在代码中以某种方式引用它们,但我不知道如何。 此外,Jeditable控件是许多元素id中的一个,如果它有一个方位。
那些知识更多的想法?
我看了上面提到的源代码,但它看起来有点儿麻烦。 我认为它可能是为旧版本的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'
});
jeditable-datepicker插件似乎完全符合您的需要。
它在Jeditable中启用了jQuery UI Datepicker。 这是演示 。
这是我的解决方案。 我使用自定义日期格式,并在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 );
},
});
}});
我有同样的问题。 在http://www.appelsiini.net/projects/jeditable/custom.html的源代码中搜索,让我找到了解决方案。
有一个“jquery.jeditable.datepicker.js”。 在我的代码中添加了一个新功能“datepicker”(也在源代码中)。
我不知道你的脚本是如何工作的,但在我的情况下,该功能还需要:
id:'elementid',
名称:'编辑'
将数据存储在数据库中。
小时:)
dabbeljuh
这是我的解决方案,但不是完整的可编辑输入类型。
$.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) { }
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.