Jeditable和jQuery UI Datepicker onblur取消不使用showOn按钮选项

我已将datepicker配置为激活如下

$(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",

我想实现这个目标(下面详细解释)

>双击字段,加载输入类型datepicker
>通过编辑数据或从datepicker中选择新日期来更改数据
>通过从日历中选择日期来提交数据
>如果用户激活了可编辑的插件,onblur：取消不起作用,除非我打开日历(如果用户点击其他地方,我想取消编辑)

但我被卡住了.你能帮助我吗？

稍后编辑

重现问题的步骤

-get jquery,jquery-ui,jeditable和附加的插件代码或来自github
– 在相应文件中添加引用的脚本
– 编写示例页面如下

<input type='editable_datepicker' value='2011-11-17'>

*点击它时,它应该打开文本框和一个漂亮的日历图标

如果单击该图标,则会显示日历

您可以提交日期并发送数据
或点击其他地方(失去焦点),不要发送数据

问题出在这里……

如果激活该字段(使其可编辑),除非激活日历,否则无法使其消失(失去焦点)

非常感谢.

解决方法

我找到了一个我认为符合您要求的解决方案.与其尝试解释您提供的示例的所有差异,而不是向您展示我所做的独立示例会更容易.

该示例使用jquery,jquery-ui和jeditable.我没有使用jquery.jeditable.datepicker.js,而是使用$.editable的addInputType方法：

$(function () {
    $.editable.addInputType('datepicker',{
        element: function(settings,original) {
            var input = $('<input />');
            input.attr('autocomplete','off');
            $(this).append(input);

            // rather than assigning plugin separately,I'm just adding it here
            //     (but doing it this way isn't critical to this solution)
            input.datepicker({
                dateFormat:'yy-mm-dd',buttonImage: "calendar_icon.gif",beforeShow: function() {
                    var editable_datepicker = $(this).parent().parent().get(0);
                    // This is the heart of the solution:
                    editable_datepicker.editing = false;
                },onClose: function(a,b) {
                    var form = $(this).parent();
                    form.submit();
                }
            });           
            return input;
        }
    });
});

这个解决方案的关键在于$.editable的私有重置方法是如何工作的.如果原始父元素的javascript键“editing”设置为false,它将不会重置(取消)输入.我只是使用.datepicker的beforeShow来设置它.

这是此示例的剩余代码：

$(function() {
    $(".editable_datepicker").editable('ajax_save.PHP',{
        id          : 'id',onblur      : 'cancel',// use 'cancel'!
        tooltip     : 'Double click to edit',event       : 'dblclick'
    });
});

和HTML：

<span class='editable_datepicker'>01/01/2012</span>

希望有所帮助.干杯.