jQuery UI Datepicker防止模糊事件的日期选择

jQuery UI Datepicker prevent blur event on date select

本文关键字：事件 日期 选择 模糊 UI Datepicker jQuery      更新时间：2023-09-26

我有一个jQuery UI日期选择器，并将其用于内联编辑，即我最初显示日期作为标签，点击它由可编辑的日期选择器和选择，我做2件事;a)在模型中设置选定的日期(并在我的changeAction方法中进行一些验证)和B)将日期文本框替换为标签(以显示选定日期)

我的问题是我如何防止模糊事件时，任何日期被选中?我希望blur事件只有在用户没有选择任何日期，只是点击退出时才会被触发。

下面是我的代码; 
$(document).on("change", ".datePicker", function () {
    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;
        }
    }   
});
changeAction: function (event) {
    var self = this;
// my custom code to set the date in model and do some validations
}

On "change"事件add data-previous -event =" changed" 

$(document).on("change", ".datePicker", function () {
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();
}
$(this).data("previous-fired-event", "change");
});

如果模糊事件调用更早，然后改变，在jQuery中添加注册回调之前的模糊事件。这很容易做到，我想你自己已经做到了。

然后在模糊事件上添加:

$(document).on("blur",".datePicker", function () {
if ($(this).data("previous-fired-event") === "change")
  return;
  $(this).data("previous-fired-event", "blur");
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;
    }
}   
});
相关文章：