HTML input value disappears after adding jquery datepicker option?

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!?

@bresleveloper Please stop bothering people for plunkers or jsfiddles. The code has to go in the question, not on an external code hosting service. — user229044
– user229044 ♦, Commented Jul 28, 2016 at 14:33

CardCaptor · Accepted Answer · 2016-07-28 12:50:45Z

1

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

$(function(){

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

});

Here's a working fiddle

answered Jul 28, 2016 at 12:50

CardCaptor

4201 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeton Thaçi Over a year ago

According to the official documentation, you can add the option after the initialization. I want to use that method for other purposes.

Nick Bull · Accepted Answer · 2016-07-28 12:55:15Z

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?
    }
});

edited Jul 28, 2016 at 12:55

answered Jul 28, 2016 at 12:45

Nick Bull

9,9567 gold badges39 silver badges68 bronze badges

1 Comment

Jeton Thaçi Over a year ago

First I get Uncaught SyntaxError: Unexpected token var, after I remove var I get Uncaught TypeError: originalAttributes.hasOwnOroperty is not a function

Angelo Berçacola · Accepted Answer · 2016-07-28 12:55:51Z

1

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" );
  });

answered Jul 28, 2016 at 12:55

Angelo Berçacola

1737 bronze badges

1 Comment

Jeton Thaçi Over a year ago

When I use this with $(this).val() instead of the date you made up, I get wrong date because of the format (I used "11-11-2016" in my value). If I first set the format option, the value disappears ... again.

Taziri Herrera Arocha · Accepted Answer · 2019-09-06 13:59:34Z

0

You need this:

$(document).ready(function () {

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

answered Sep 6, 2019 at 13:59

Taziri Herrera Arocha

356 bronze badges

Comments

Ярослав Оверченко · Accepted Answer · 2021-04-23 21:05:01Z

0

This command helped me with the problem like yours:

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

answered Apr 23, 2021 at 21:05

Ярослав Оверченко

1112 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML input value disappears after adding jquery datepicker option?

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related