Jeditable和jQuery UI Datepicker在showOn按钮选项下的onblur取消功能无法使用。

Question

Jeditable和jQuery UI Datepicker在showOn按钮选项下的onblur取消功能无法使用。

4

我已经配置了日期选择器，激活方式如下：

$(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'>

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

如果您点击图标，日历将出现

您可以提交日期并发送数据，或者单击其他地方（失去焦点）而不发送数据

问题在于...

如果您激活该字段（使其可编辑），则除非您激活日历，否则无法使其消失（失去焦点）

非常感谢。

- cristi _b

2

在主题中，您暗示您希望showOn选项起作用，但在您想要实现的列表中，您没有提到它...请更清楚地说明您想要实现什么以及存在哪些问题。 - William Niu

我会在内容中添加更多细节。 - cristi _b

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Synexis · Accepted Answer

我找到了一个解决方案，我相信它符合您的要求。与其试图解释与您提供的示例之间的所有差异，不如向您展示我所做的独立示例会更容易。

这个示例使用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', 
                showOn: "button",
                buttonImage: "calendar_icon.gif",
                buttonImageOnly: true,
                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',
        type        : 'datepicker',
        style       : 'margin:0px;width:80%;display:inline',
        onblur      : 'cancel', // use 'cancel'!
        tooltip     : 'Double click to edit',
        event       : 'dblclick'
    });
});

还有HTML代码：

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

希望能帮到你。祝愉快。