Jeditable和jQuery UI日期选择器onblur cancel不使用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     : ''
        });
    });
});

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

我正在使用这个插件

    showOn: "button",
    buttonImage: "img/calendar_icon.gif",
    buttonImageOnly: true, 

资料来源：

我希望实现这一点（详细解释如下）

• 双击字段，加载输入类型datepicker
• 通过编辑数据或从datepicker中选择新日期来更改数据
• 通过从日历中选择日期提交数据
• 如果用户激活了可编辑插件，onblur:cancel不会工作，除非我打开日历（如果用户单击其他地方，我想取消编辑）

但是我被卡住了。你能帮我吗

以后编辑

重现问题的步骤

-从github获取jquery、jquery ui、jeditable和附加的插件代码 -在相应的文件中添加引用的脚本 -编写一个示例页面，如下所示

$(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     : ''
        });
    });
});

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

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

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

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

问题就在这里……

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

---

非常感谢。

我找到了一个我认为符合您要求的解决方案。与其试图解释与您提供的示例的所有差异，不如向您展示一个我所做的工作的独立示例

该示例使用jquery、jquery ui和jIDTable。我使用的不是jquery.jeditable.datepicker.js，而是addInputType方法$.editable：

$(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;
        }
    });
});

以及HTML：

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

01/01/2012

---

希望有帮助。干杯。

在主题中，您暗示希望

showOn

选项起作用，但在您想要实现的目标列表中，您没有提到它。。。请更清楚地说明你想要达到的目标和存在的问题。我会在内容中添加更多的细节。我最终确实做到了这一点