添加jquery日期选择器选项后，HTML输入值将消失

HTML input value disappears after adding jquery datepicker option?

本文关键字：输入 HTML 消失 jquery 日期 选择器 选项 添加      更新时间：2023-09-26

我有多个文本输入，如下所示：

<input type="text" class="datepicker" value="11-11-2016">

以及jquery脚本：

  $(".datepicker").each(function() {
    $(this).datepicker();
    $(this).datepicker("option", "changeYear", true);
  });

页面加载后，输入值立即消失！！！

如果我删除选项：

$(this).datepicker("option", "changeYear", true);

该值不会消失，但每当我添加任何jquery日期选择器选项时，该值就会消失！？

我认为问题在于初始化，请尝试以下操作：

$(function(){
    $('.datepicker').each(function(){
        $(this).datepicker({"changeYear": true});
    });
});

这是一个工作小提琴

稍后尝试此行以纠正问题：

$(".datepicker").each(function() {
    $(this).datepicker();
    $(this).datepicker("option", "changeYear", true);
    $(this).attr("value", "11-11-2016");
});

如果每个$(".datepicker")的属性是动态的，则使用以下内容：

function getElemAttributes(var element) {
    var attrs = {};
    var attrMap = element.attributes;
    $.each(attrMap, function (i, e) { attrs[e.nodeName] = e.nodeValue; });
    return attrs;
}

以获取作为对象的所有属性。因此：

$(".datepicker").each(function() {
    $(this).datepicker();
    // Returns something like { id: "datepicker", ..., value: "11-11-2016" }
    var originalAttributes = getElemAttributes(this);
    // Do stuff that affects attr on element.
    $(this).datepicker("option", "changeYear", true);
    // Set element attributes from riginal attributes object.
    if (originalAttributes.hasOwnOroperty("value")) {
        $(this).attr("value", originalAttributes["value"]);
    }
    else {
        // Didn't originally have a "value" attribute - set some default here?
    }
});

您应该使用此选项设置初始日期：

$( ".selector" ).datepicker( "setDate", "10/12/2012" );

在您的代码示例中：

  $(".datepicker").each(function() {
    $(this).datepicker();
    $(this).datepicker("option", "changeYear", true);
    $(this).datepicker( "setDate", "10/12/2012" );
  });

您需要这个：

$(document).ready(function () {
$('.datepicker').each(function(){
    $(this).datepicker();
    $(this).datepicker("option", "changeYear", true);
    $(this).datepicker( "setDate", $(this)[0].getAttribute('value') );
});

这个命令帮助我解决了类似您的问题：

let date = $(this.dateInput.nativeElement).val().toString();
....
$(this.dateInput.nativeElement).datepicker().val(date).trigger('change');
相关文章：