Date Input Wont Console Log Value

Question

I am trying to see what value my date input field has however I am always left with null in my console.

I am using the following JS to console.log my date input value:

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log(this.getAttribute('value'));
});

Here is my input field also:

<input id="date_of_birth" 
class="input input--bravo pad-1/2 span-1x field-date_of_birth is-invalid" 
data-palm="span-1x" 
placeholder="dd/mm/yyyy" 
pattern="\d{2}\/\d{2}\/\d{4}*"
name="payload[date_of_birth]" 
type="date" _flx1_12_1="1" _flx1_13_1="1">

When I select a date my JS triggers however prints null into the console. Why doesn't it show the date I have selected? I only want to see the date so I can see how the value is formatted so I can setup some validation for it.

Thanks, Nick

Possible duplicate of [Difference between Element.value and Element.getAttribute("value")](http://stackoverflow.com/questions/11973678/difference-between-element-value-and-element-getattributevalue) — Álvaro González, Oct 03 '16 at 09:55

score 0 · Answer 1 · answered Oct 03 '16 at 09:54

0

Try with console.log(this.value); instead of console.log(this.getAttribute('value'));

this.getAttribute will catch the HTML atrribute

answered Oct 03 '16 at 09:54

Steeve Pitis

4,283
1
21
24

score 0 · Answer 2 · answered Oct 03 '16 at 10:00

0

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log($('#date_of_birth').getDate());
});

You can use above Code to get Date of that HTML element.

answered Oct 03 '16 at 10:00

dush88c

1,918
1
27
34

Kumar_Vikas · Answer 3 · 2016-10-03T10:24:19.337

0

You can Try:

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log(this.value);
});

OR

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log(document.getElementById('date_of_birth').value);
});

edited Oct 03 '16 at 10:24

answered Oct 03 '16 at 10:01

Kumar_Vikas

837
7
16

Sankar · Accepted Answer · 2016-10-03T10:20:53.720

Try this...

getAttribute may used for defined or custom properties. You should use .value

document.getElementById('date_of_birth').addEventListener('change', function() {
  console.log(this.value);
});

<input id="date_of_birth" 
       class="input input--bravo pad-1/2 span-1x field-date_of_birth is-invalid" 
       data-palm="span-1x" 
       placeholder="dd/mm/yyyy" 
       pattern="\d{2}\/\d{2}\/\d{4}*" 
       name="payload[date_of_birth]" 
       type="date" _flx1_12_1="1" _flx1_13_1="1">

you can use getAttribute in this below case.

document.getElementById('date_of_birth').addEventListener('change', function() {
  console.log(this.getAttribute('value'));
});

<input id="date_of_birth" 
       class="input input--bravo pad-1/2 span-1x field-date_of_birth is-invalid" 
       data-palm="span-1x" 
       placeholder="dd/mm/yyyy" 
       pattern="\d{2}\/\d{2}\/\d{4}*" 
       name="payload[date_of_birth]" 
       value="01/01/2016"
       type="date" _flx1_12_1="1" _flx1_13_1="1">

Date Input Wont Console Log Value

4 Answers4