CODEWITHSUNDEEP
javascriptjqueryhtmldate
jmancherje
jmancherje

Reputation: 6633

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

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

Upvotes: 32

Views: 162306

Answers (5)

Yuriy Yakym
Yuriy Yakym

Reputation: 3931

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/

Upvotes: 49

user11930475
user11930475

Reputation:

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

Upvotes: 2

Pramod Gupta
Pramod Gupta

Reputation: 41

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

Upvotes: 1

guest271314
guest271314

Reputation: 1

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/

Upvotes: 9

Oleg Sklyar
Oleg Sklyar

Reputation: 10092

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

...

Upvotes: 5

Related Questions