CODEWITHSUNDEEP
javascripthtmlcss
Saud Alghamdi
Saud Alghamdi

Reputation: 199

How to get selected date value using vanilla JavaScript?

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: enter image description here

Upvotes: 1

Views: 741

Answers (4)

allancoding
allancoding

Reputation: 549

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!

Upvotes: 0

user14779090
user14779090

Reputation:

try console.log(birthday.value); please

Upvotes: 0

Dibash Sapkota
Dibash Sapkota

Reputation: 665

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>

Upvotes: 2

dave
dave

Reputation: 64657

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>

Upvotes: 1

Related Questions