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

Answer 1

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/