添加jquery datepicker选项后HTML输入值消失？

Question

I have multiple text inputs like this:

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

And the jquery script:

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

The input value disappears immediately after the page loads!!!

If I remove the option:

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

... the value doesn't dissapear, but whenever I add any of the jquery datepicker options - the value dissapears!?

Answer 1

Try this line afterwards to rectify the issue:

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

If the attributes are dynamic per $(".datepicker") , then use the following:

function getElemAttributes(var element) {
    var attrs = {};
    var attrMap = element.attributes;

    $.each(attrMap, function (i, e) { attrs[e.nodeName] = e.nodeValue; });

    return attrs;
}

to get all of the attributes as an object. So:

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

Answer 2

I think the problem it's in your initialization, try this:

$(function(){

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

});

Here's a working fiddle

Answer 3

You should use this option to set the initial date:

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

in you code example:

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

Answer 4

You need this:

$(document).ready(function () {

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

Answer 5

This command helped me with the problem like yours:

let date = $(this.dateInput.nativeElement).val().toString();
....
$(this.dateInput.nativeElement).datepicker().val(date).trigger('change');