使用 jQuery UI 日期选择器进行内联编辑答案

【问题标题】：Inline Edit with jQuery UI date picker使用 jQuery UI 日期选择器进行内联编辑
【发布时间】：2014-06-25 11:34:41
【问题描述】：

我正在尝试为日期字段实现内联编辑（使用 jQuery UI 日期选择器）

我使用的代码如下；

$(document).on("click",".editableDateTxt", function () {
    var currElmModelId = $(this).attr('data-model-id');
    var currElmModelAttr = $(this).attr('data-model-attr');
    var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px' ,'data-model-id': currElmModelId, 'data-model-attr': currElmModelAttr, 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();

    input.datepicker().focus();

});

$(document).on("change", ".datePicker", function () {
    //alert($(this).val());
    var dataValid = $(this).attr('data-valid');
    if (dataValid == "Y") {
        var currElmModelId = $(this).attr('data-model-id');
        var currElmModelAttr = $(this).attr('data-model-attr');
        var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
        var parent = $(this).parent();
        parent.append(divEle);
        $(this).remove();
    }
});

$(document).on("blur",".datePicker", function () {
    if (this.hasAttribute('data-model-id')) {
        var dataValid = $(this).attr('data-valid');

        if (typeof dataValid == "undefined" || dataValid == "Y") {
            var currElmModelId = $(this).attr('data-model-id');
            var currElmModelAttr = $(this).attr('data-model-attr');
            var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
            var parent = $(this).parent();
            parent.append(divEle);
            $(this).remove();
            return false;
        }

    }   
});

现在，当我选择任何日期或进行模糊处理时，出现以下错误；

缺少此日期选择器的实例数据

我认为这个问题与使用 data() 的 jQuery UI 日期选择器有关所以我尝试使用 detach() 而不是 remove()...

所以我只使用了 $(this).detach();

您能否指导我正确使用 detach() 方法，这可能会解决问题...

【问题讨论】：

我修改了您的代码 (jsfiddle.net/xdw9A)，但使用 Chrome 时看不到任何错误。
实际上我想要的方式是日期最初会显示为标签，单击它会更改为日期选择文本框，然后再次选择日期，更改为显示标签文本

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

您可能遇到了与我相同的问题。您的 onblur 中的代码在 datepicker 完成其工作之前触发，因此您在 datepicker 完成之前丢失了输入对象。

我能够通过关于此问题的已接受答案中的一项建议来解决此问题： https://stackoverflow.com/a/1814308/3434790

在我的场景中有效的解决方案是将我的代码包装在我的 on blur 函数中的 setTimeout 中，这有效地使其能够在 datepicker 完成它的操作后运行代码。

在你的情况下，我建议如下：

$(document).on("blur",".datePicker", function () {
setTimeout(function(){
    if (this.hasAttribute('data-model-id')) {
        var dataValid = $(this).attr('data-valid');

        if (typeof dataValid == "undefined" || dataValid == "Y") {
            var currElmModelId = $(this).attr('data-model-id');
            var currElmModelAttr = $(this).attr('data-model-attr');
            var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
            var parent = $(this).parent();
            parent.append(divEle);
            $(this).remove();
            return false;
        }
    }   
},100);

});

【讨论】：