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.

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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