How to set value of input number with jQuery?

Question

I'm trying to set the value of an input element using jQuery.

HTML: <input id="id_year" name="year" type="number">

JavaScript:

$(document).ready(function () {
    var year = $("#id_year");
    year.datepicker({
        format: " yyyy", // Notice the Extra space at the beginning
        viewMode: "years", 
        minViewMode: "years"
    });
    year.on('changeDate', function(ev){
        year.attr('value',ev.date.getFullYear());
    });
});

If the input type is text, it works. But I have to use number as input type.

How can I set the input value with jQuery or regular JavaScript?

Important notes

I tried to use year.val(ev.date.getFullYear()); but It didn't work.

You shouldn't be using .attr() to set the value property of any form elements, you should be using .val(). (As an aside, why is there a space at the beginning of the format?) — nnnnnn
– nnnnnn, Commented Jun 16, 2016 at 8:25
@KinjalGohil I tried with year.val(ev.date.getFullYear());, but It doesn't work! — Fabio
– Fabio, Commented Jun 16, 2016 at 8:29
Seems val can have issues sometimes? stackoverflow.com/questions/11873721/… — JeopardyTempest
– JeopardyTempest, Commented Jun 22, 2018 at 8:44

Jax Teller · Accepted Answer · 2016-06-16 08:36:04Z

0

Your code is right, just the definition of datepicker is wrong, change

format: " yyyy"

to :

dateFormat: "yy"

(If you are using jquery-ui datepicker)

DEMO Here

edited Jun 16, 2016 at 8:36

answered Jun 16, 2016 at 8:29

Jax Teller

1,4772 gold badges15 silver badges25 bronze badges

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

3 Comments

Fabio Over a year ago

Your works, my script not. Perhaps because I am using bootstrap-datepicker.js bootstrap-datepicker.readthedocs.io/en/latest/index.html

Fabio Over a year ago

Using ev.date.getFullYear() I get a valid year number. I do not understand why I can not change the input value. If the type is "text" it works, but not if the type is "number".

Fabio Over a year ago

I chose to use the jquery-ui library. Thanks

Eduard Void · Accepted Answer · 2016-06-16 08:18:57Z

0

year.val(ev.date.getFullYear());

to get the value: var yearValue = year.val();

http://api.jquery.com/val/

answered Jun 16, 2016 at 8:18

Eduard Void

2,7041 gold badge16 silver badges14 bronze badges

Comments

ADreNaLiNe-DJ · Accepted Answer · 2016-06-16 08:22:40Z

0

You have to use the val function.

You can write your code as this:

$(document).ready(function () {
    var year = $("#id_year");
    year.datepicker({
        format: " yyyy", // Notice the Extra space at the beginning
        viewMode: "years", 
        minViewMode: "years"
    });
    year.on('changeDate', function(ev){
        console.log("ssds");
        $(this).val(ev.date.getFullYear());
    });
});

answered Jun 16, 2016 at 8:22

ADreNaLiNe-DJ

4,8994 gold badges28 silver badges35 bronze badges

Comments

Manish · Accepted Answer · 2016-06-16 08:28:29Z

You can use like this.

$(document).ready(function () {
    var year = $("#id_year");
    year.datepicker({
        format: " yyyy", // Notice the Extra space at the beginning
        viewMode: "years", 
        minViewMode: "years",
        onSelect: function(dateText) {
          console.log(dateText);
          var startDate = new Date(dateText);
          year.val(startDate.getFullYear());
          console.log(year.val());
        }
    });
   /* year.on('changeDate', function(ev){
        console.log("ssds");
        year.val(ev.date.getFullYear());
      console.log(year.val());
    });*/
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<input id="id_year" name="year" type="number">

Collectives™ on Stack Overflow

How to set value of input number with jQuery?

Important notes

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Important notes

4 Answers 4

3 Comments

Comments

Comments

Comments

Linked

Related