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, Jun 16 '16 at 08:25
@KinjalGohil I tried with `year.val(ev.date.getFullYear());`, but It doesn't work! — Fabio, Jun 16 '16 at 08:29
Seems val can have issues sometimes? https://stackoverflow.com/questions/11873721/jquery-val-change-doesnt-change-input-value — JeopardyTempest, Jun 22 '18 at 08:44

score 0 · Answer 1 · answered Jun 16 '16 at 08:18

0

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

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

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

answered Jun 16 '16 at 08:18

Eduard Void

2,646
1
13
13

score 0 · Answer 2 · answered Jun 16 '16 at 08:22

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

score 0 · Answer 3 · answered Jun 16 '16 at 08:28

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">

Jax Teller · Accepted Answer · 2016-06-16T08:36:04.313

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 '16 at 08:36

answered Jun 16 '16 at 08:29

Jax Teller

1,447
2
15
24

Your works, my script not. Perhaps because I am using bootstrap-datepicker.js https://bootstrap-datepicker.readthedocs.io/en/latest/index.html – Fabio Jun 16 '16 at 08:47
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 Jun 16 '16 at 08:58
I chose to use the jquery-ui library. Thanks – Fabio Jun 16 '16 at 14:43

How to set value of input number with jQuery?

Important notes

4 Answers4