get date and month from html5 datefield javascript

Question

I have a date field which looks like this

var date_input = document.getElementById('date_cust');
  date_input.onchange = function(){
  alert("The date you selected is : "+date_input.value);
}

<input autocomplete="off" type="date" class="form-control" id="date_cust" name="date_cust" required />

and resulted/alerted something like this:

``The date you selected is: 2020-01-20``

I want to know is there any ways to get only the date and the month, because I want to compare the date and the month with the date and the month which I already set, for example, 31st of March (31-03 / 03-31). Something like this.

var 31march = '03-31';
if (extracted_data == 31march) {
  alert("Happy Birthday");
} else { 
  alert("Not your birthday yet.")
}

I already tried to parse the value like this:

var date_input = Date.parse(document.getElementById('date_cust').innerHTML);

but it resulted in NaN

is there any other ways for this case? Thank you in advance.

Hi @kank95 did you get it work – Gideon Babu Jan 30 '20 at 12:49 — Gideon Babu, Jan 30 '20 at 12:49

score 2 · Answer 1 · answered Jan 30 '20 at 12:19

2

Use getMonth() from new Date():

const myDate = new Date('2020-01-30')
console.log(myDate.getMonth())

//0 = january
//1 = February
...

DOCS

answered Jan 30 '20 at 12:19

Marcelo The Mage Coder

1,944
2
11
29

I think the OP is looking also for the way to correctly extract the date from the `input` element. – David Jan 30 '20 at 12:34
yes i'm looking how to extract date and month from date field not static value, but hey thanks for the answer – kank95 Jan 30 '20 at 13:54
I know you want to extract from the field value, you just need to pass `document.getElementById('date_cust').value` as parameter for `new Date()` – Marcelo The Mage Coder Jan 30 '20 at 14:43

score 1 · Accepted Answer · answered Jan 30 '20 at 12:21

1

You can split the date and get the parts that you need

var dateArr = date_input.value.split("-");
console.log('year: ' + dateArr[0])
console.log'month: ' + (dateArr[1])
console.log('day: ' + dateArr[2])

var new_date = dateArr[2] + '-' + dateArr[1];
console.log(new_date)

answered Jan 30 '20 at 12:21

KoKa

797
1
14
31

hey thanks for the answer,precisely solve my case to extract the date and the month – kank95 Jan 30 '20 at 13:58

David · Answer 3 · 2020-01-30T12:31:00.723

To get the date from the input element, you must use the new Date() method passing the value attribute of the input as param.

 var dateCustom = new Date(this.value);

this refers to the input element because you will use in the event handler.

Then, use the getDate() and getMonth() JS methods to extract the day of the month and the month.

var date_input = document.getElementById('date_cust');
  date_input.onchange = function(){
    var dateCustom = new Date(this.value);
    document.getElementById('day').textContent = dateCustom.getDate();
    document.getElementById('month').textContent = dateCustom.getMonth() + 1;
}

<input autocomplete="off" type="date" class="form-control" id="date_cust" name="date_cust" required />

<p id="day"></p>
<p id="month"></p>

Yahya Ayyoub · Answer 4 · 2020-01-30T12:41:58.907

0

use this:

getDate()

   const yourDate = new Date('2019-03-10');

   console.log(yourDate.getDate())

    console.log(yourDate)

**variable in js can't be start with a number "var 31march = '03-31';" should be for example var march31 = '03-31' ; **

these are the set of rules you should consider:

1-Names can contain letters, digits, underscores, and dollar signs.

2-Names must begin with a letter

3-Names can also begin with $ and _ (but we will not use it in this tutorial)

4-Names are case sensitive (y and Y are different variables)

Reserved words (like JavaScript keywords) cannot be used as names

edited Jan 30 '20 at 12:41

answered Jan 30 '20 at 12:19

Yahya Ayyoub

322
2
10

Please note that `getDay()` returns the day of the week. The OP want to extract the day of the month; you use `getDate()`. – David Jan 30 '20 at 12:37

score 0 · Answer 5 · answered Jan 30 '20 at 12:36

Since parsing of even the formats specified in ECMA-262 is not consistent, it is recommended to never rely on the built–in parser and to always manually parse strings, say using a library and provide the format to the parser.

E.g. in moment.js you might write:

let m = moment(date_input.value).format('MM-DD');

Where:

MM stands for month number (eg: 01-12)
DD stands for day of the month (eg: 01-31)

Read the moment docs here: https://momentjs.com/docs/

More information about why it is giving you a NaN as result can be found here: Why does Date.parse give incorrect results?

score 0 · Answer 6 · answered Jan 30 '20 at 12:44

Here is the code that might work for you:

var date_input = document.getElementById('date_cust');
  date_input.onchange = function() {  
  var birthday = '3-31';
  let dateSelected = new Date(date_input.value);    
  let dateMonth = (dateSelected.getMonth() + 1) + '-' + dateSelected.getDate() ;    
  if (dateMonth === birthday) {
    alert("Happy Birthday");
  } else {
    alert("Not your birthday yet.")
  } 
}

but it is better to split the date input value by - so that you know first value is the year, and the second one is a month and third one is a year.

Here is my code pen link: https://codepen.io/gideonbabu/pen/ZEYdzLj

hey thanks for the answer, i tried this too and works as well but i prefer the answer from KoKa — kank95, Jan 30 '20 at 13:57

get date and month from html5 datefield javascript

6 Answers6