我已经配置了日期选择器,激活方式如下:
我正在使用这个插件。
来源:https://github.com/qertoip/jeditable-datepicker/blob/master/src/jquery.jeditable.datepicker.js
$(function () {
$(".editable_datepicker").click(function (event) {
$(this).editable('ajax_save.php',{
id : 'id',
type : 'datepicker',
style : 'margin:0px;width:80%;display:inline',
onblur : 'submit',
tooltip : ''
});
});
});
我正在使用这个插件。
来源:https://github.com/qertoip/jeditable-datepicker/blob/master/src/jquery.jeditable.datepicker.js
jQuery.expr[':'].focus = function( elem ) {
return elem === document.activeElement && ( elem.type || elem.href );
};
$.editable.addInputType( 'datepicker', {
element: function( settings, original ) {
var form = $( this ),
input = $( '<input />' );
input.attr( 'autocomplete','off' );
form.append( input );
settings.onblur = 'nothing';
return input;
},
plugin: function( settings, original ) {
var form = this, input = form.find( "input" );
settings.onblur = 'nothing';
input.datepicker( {
dateFormat:'yy-mm-dd',
showOn: "button",
buttonImage: "img/calendar_icon.gif",
buttonImageOnly: true,
onSelect: function() {
form.submit();
},
onClose: function() {
setTimeout( function() {
if ( !input.is( ':focus' ) ) {
original.reset( form );
} else {
form.submit();
}
}, 150 );
}
} );
}
} );
只要我不在这个插件中添加以下选项,这个插件就可以成功运行
showOn: "button",
buttonImage: "img/calendar_icon.gif",
buttonImageOnly: true,
我希望实现以下功能(详细说明如下)
- 双击字段,加载输入类型日期选择器
- 通过编辑或从日期选择器中选择新日期来更改数据
- 通过从日历中选择一个日期提交数据
- 如果用户激活了可编辑插件,在失去焦点时:除非我打开日历,否则cancel不起作用(如果用户在其他地方单击,我想取消编辑)
但我卡住了。你能帮我吗?
稍后编辑
重现问题的步骤
-获取jQuery、jQuery-UI、jeditable和附加的插件代码或从github下载 -按照相应的文件添加引用脚本 -编写以下示例页面
<input type='editable_datepicker' value='2011-11-17'>
*点击时,应该打开文本框和一个漂亮的日历图标
如果您点击图标,日历将出现
您可以提交日期并发送数据,或者单击其他地方(失去焦点)而不发送数据
问题在于...
如果您激活该字段(使其可编辑),则除非您激活日历,否则无法使其消失(失去焦点)
非常感谢。
showOn
选项起作用,但在您想要实现的列表中,您没有提到它...请更清楚地说明您想要实现什么以及存在哪些问题。 - William Niu