How to extract values from HTML <input type="date"> using jQuery

Question

Using an HTML input type="date" and a submit button. I would like to populate the variables day, month, and year with the appropriate values from the date input.

<input type="date" id="date-input" required />
<button id="submit">Submit</button>

and the jQuery:

var day, month, year;

$('#submit').on('click', function(){
  day = $('#date-input').getDate();
  month = $('#date-input').getMonth() + 1;
  year = $('#date-input').getFullYear();
  alert(day, month, year);
});

Here's a code sample: https://jsfiddle.net/dkxy46ha/

the console error is telling me that .getDate() is not a function.

I have seen similar questions but the solutions have not worked for me. How can I extract the day, month and year from the input type="date"? Thanks

value is string you need to create new Date from

charlietfl
– charlietfl

2015-10-23 22:33:28 +00:00
Commented Oct 23, 2015 at 22:33 — charlietfl
– charlietfl, Commented Oct 23, 2015 at 22:33

Yuriy Yakym · Accepted Answer · 2020-12-29 13:02:29Z

49

Firstly you need to create a Date object from input element value. And then you will be able to get day, month and year from this object.

$('#submit').on('click', function(){
  var date = new Date($('#date-input').val());
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  alert([day, month, year].join('/'));
});

Working example: https://jsfiddle.net/8poLtqvp/

edited Dec 29, 2020 at 13:02

answered Oct 23, 2015 at 22:35

Yuriy Yakym

3,96621 silver badges33 bronze badges

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

2 Comments

Belmiris Over a year ago

Yeah, this doesn't work. The day if off by +/- 1. If you add 1 to it, you risk invalid dates.

ModusPwnens Over a year ago

Use getUTCDate() as opposed to getDate(). The same goes for month and year.

guest271314 · Accepted Answer · 2015-10-23 22:45:17Z

9

Date value returned by input type="date" is format yyyy-mm-dd . Could use .split() with argument "-" to retrieve array containing [yyyy, mm, dd]

Note, alert() expects string as parameter ; does not print values same as console.log() with comma , operator

var day, month, year;

$('#submit').on('click', function() {
  var date = $('#date-input').val().split("-");
    console.log(date, $('#date-input').val())
  day = date[2];
  month = date[1];
  year = date[0];
  alert(day + month + year);
});

jsfiddle https://jsfiddle.net/dkxy46ha/2/

answered Oct 23, 2015 at 22:45

guest271314

1

Comments

Oleg Sklyar · Accepted Answer · 2015-10-23 22:41:09Z

5

date = new Date($('#date-input').val())
date.getDate()

...

edited Oct 23, 2015 at 22:41

answered Oct 23, 2015 at 22:33

Oleg Sklyar

10.1k6 gold badges43 silver badges64 bronze badges

2 Comments

Yuriy Yakym Over a year ago

It will not work. You need to get value of input. And only then create Date object

Yuriy Yakym Over a year ago

date = new Date($('#date-input').val())

user11930475 · Accepted Answer · 2020-06-30 12:38:44Z

2

The Advantage of JQuery ? A few lines of code do a lot !!

alert only takes a string as its parameter. So simply, we just have to pass our Date object as a string using th String built-in-Function.

Just replace the button tag with this...

<button onclick="alert(String( $("#date-input").val() ))">Submit</button>

You can do further manipulations on the string you'll be alerted as yyyy-mm-dd

answered Jun 30, 2020 at 12:38

user11930475

Comments

Pramod Gupta · Accepted Answer · 2018-10-03 07:14:24Z

1

        <input type="date" id="date-input"/>
        <input type="submit" id="submit" value="submit"/>


<script>
      $('#submit').on('click', function(){
              var date = new Date($('#date-input').val());
              var day = $('#date-input').getDate();
              var month = $('#date-input').getMonth() + 1;
              var year = $('#date-input').getFullYear();
              alert(day+"/"+ month+"/"+year);
            });
    </script>

Date class will convert input data into date type. Then getMonth() gives us value from 0-11 so we can either consider January as 0 or we can add 1 to received value that's what I did here.

Here I just used Jquery to fetch date, months and year respectively and if you want to post the data you can convert that values into string.

edited Oct 3, 2018 at 7:14

answered Jun 7, 2018 at 11:05

Pramod Gupta

412 bronze badges

2 Comments

DaFois Over a year ago

you should alway explain what your code does. It will be more helpful for everybody also in the future

Prasanth K C Over a year ago

It would be helpful to others if you can provide details on how you arrive on this solution.

Collectives™ on Stack Overflow

How to extract values from HTML <input type="date"> using jQuery

5 Answers 5

2 Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related