How to get selected date value using vanilla JavaScript?

Question

I made a date input in my HTML file to select birthday, but how do I get the selected date value using vanilla JavaScript? I only managed to get the attribute itself and not the selected date.

My HTML file:

<div class=wrapper>
      <h1 class="age-text">Your Age is:</h1>
      <h1 class="age">0 years, 0 months, 0 days</h1>
      <label class="enter-age-text" for="">Enter Your birthday below:</label>
      <input class="birthday" type="date" name="" id="">
      <button>Calculate</button>
    </div>

My JS file:

let birthday =  document.querySelector('.birthday');
let button = document.querySelector('button');


button.addEventListener("click", e => {
    console.log(birthday);
})

The input I get after clicking the button:

just a tip: birthday.max = new Date().toISOString().slice(0, 10) — Endless
– Endless, Commented Jun 1, 2021 at 17:15

Dibash Sapkota · Accepted Answer · 2021-06-01 17:22:54Z

2

Check this Code

let birthday = document.querySelector('#birthday');
let button = document.querySelector('button');
let res = document.querySelector('.age');

button.addEventListener("click", e => {
  let birthDate = new Date(birthday.value);
  let today = new Date();

  let difference = (today - birthDate);

  let totalDay = difference / (1000 * 3600 * 24);

  let year = (totalDay / 365).toFixed(0);
  let month = ((totalDay - year * 365) / 30).toFixed(0);
  let day = ((totalDay - month * 30 - year * 365)).toFixed(0);

  let str = `${year} Years, ${month} Months, ${day} Days`;

  res.innerHTML = str;
});

<div class=wrapper>
  <h1 class="age-text">Your Age is:</h1>
  <h1 class="age">0 years, 0 months, 0 days</h1>
  <label class="enter-age-text" for="">Enter Your birthday below:</label>
  <input class="birthday" type="date" name="" id="birthday">
  <button>Calculate</button>
</div>

answered Jun 1, 2021 at 17:22

Dibash Sapkota

6657 silver badges9 bronze badges

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

1 Comment

allancoding Over a year ago

Some of your vars are negative

dave · Accepted Answer · 2021-06-01 17:19:17Z

1

Use the .value property (or the .valueAsDate property)

let birthday =  document.querySelector('.birthday');
let button = document.querySelector('button');


button.addEventListener("click", e => {
    console.log(birthday.value);
    console.log(birthday.valueAsDate);
})

<div class=wrapper>
      <h1 class="age-text">Your Age is:</h1>
      <h1 class="age">0 years, 0 months, 0 days</h1>
      <label class="enter-age-text" for="">Enter Your birthday below:</label>
      <input class="birthday" type="date" name="" id="">
      <button>Calculate</button>
    </div>

edited Jun 1, 2021 at 17:19

answered Jun 1, 2021 at 17:05

dave

65.1k6 gold badges81 silver badges98 bronze badges

1 Comment

Endless Over a year ago

fyi, there is also birthday.valueAsDate

user14779090 · Accepted Answer · 2021-06-01 17:31:29Z

0

try console.log(birthday.value); please

answered Jun 1, 2021 at 17:31

user14779090

Comments

allancoding · Accepted Answer · 2021-06-01 17:37:05Z

var button = document.querySelector('button');


button.addEventListener("click", e => {
//Console is true you can change it to false
var con = true;

var birthday =  document.getElementById("Date").value;
if(con == true){console.log('Your Birthday: ' + birthday);}
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
if(con == true){console.log('Todays Date: ' + today);}
var arr = birthday.split("-");
var cyyyyc = arr[0]-yyyy;
var cyyyy = Math.abs(cyyyyc);
var cmmc = arr[1]-mm;
var cmm = Math.abs(cmmc);
var cddc = arr[2]-dd;
var cdd = Math.abs(cddc);
var cac = cyyyy + ' years, ' + cmm + ' months, ' + cdd + ' days';
if(con == true){console.log('You are: ' + cac);}
document.getElementById("Age").innerHTML = cac;
})

<div class=wrapper>
      <h1 class="age-text">Your Age is:</h1>
      <h1 id="Age" class="age">0 years, 0 months, 0 days</h1>
      <label class="enter-age-text" for="">Enter Your birthday below:</label>
      <input class="birthday" type="date" id="Date">
      <button>Calculate</button>
    </div>

Try This!

Collectives™ on Stack Overflow

How to get selected date value using vanilla JavaScript?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related