可通过jQuery UI日期选择器进行编辑
我需要有一个点击编辑页面上的元素，这将反过来调用jQuery UI日期选择器的一个实例。
目前，我正在使用JEditable来提供就地编辑，它工作得很好。但是，我有一个日期控件输入，我希望它显示为日历，这是有趣的开始。
我发现了Calle Kabo在this 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 document ready函数的内部和外部--没有，joy。
我的UI Datepicker类是日期选择器，我的Jeditable类是ajaxedit，我确信上面的不作为是因为需要在代码中以某种方式引用它们，但我不知道是如何实现的。此外，Jeditable控件是众多元素if中的一个，如果有关系的话。
了解内情的人有什么想法吗？
回答 5
Stack Overflow用户
发布于 2009-03-26 10:11:00
我也有同样的问题。通过搜索http://www.appelsiini.net/projects/jeditable/custom.html的源代码，我找到了解决方案。
有一个"jquery.jeditable.datepicker.js“。我在我的代码中添加了一个新函数"datepicker“(也在源代码中)。
我不知道你的脚本是如何工作的，但在我的例子中，函数还需要：
id：'elementid'，
名称：'edit‘
将数据存储在数据库中。
hth :)
dabbeljuh
Stack Overflow用户
发布于 2009-09-10 18:18:12
我看了一下上面提到的源码，但它似乎有点but。我认为它可能是为旧版本的日期选择器设计的，而不是为jQuery UI日期选择器设计的。我对代码做了一些修改，经过修改，它至少可以在Firefox3、Safari4、Opera9.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'
});Stack Overflow用户
发布于 2011-05-08 01:36:17
jeditable-datepicker插件似乎完全符合您的需求。
它在Jeditable中启用了jQuery UI数据选择器。这是demo。
https://stackoverflow.com/questions/642136
复制相似问题
腾讯云开发者
