JavaScript Date of birth under 18

Question

Is there a way to perform validation on the full date of birth (dd/mm/yyyy) to establish if the user is under 18 years. Most of the tutorials I found only shows me how to do it if the user age (not DOB) is under 18. By the way I'm also using input type of "date" for my DOB textbox. HTML

<body>
    <header class="v-header container">
        <div class="fullscreen-backgorund-Booking">
        </div>
        <div>
            <ul>
                <li><a href="Home">Home</a></li>
                <li><a href="McLaren Vale">McLaren Vale</a></li>
                <li><a href="Barossa">Barossa</a></li>
                <li><a href="Clare">Clare</a></li>
                <li><a href="Online Booking">Online Booking</a></li>
                <div id="mySidenav" class="sidenav">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <a href="Home">Home</a>
                    <a href="McLaren Vale">McLaren</a>
                    <a href="Barossa">Barossa</a>
                    <a href="Clare">Clare</a>
                    <a href="Online Booking">Online Booking</a>
                </div>
                <span id="sidebtn" onclick="openNav()">&#9776;</span>
            </ul>
        </div>

        <div class="header-overlay"></div>
        <div class="header-content" style="width: 100%;">
            <!-- width... is not working in external css... why?-->

            <h1 style="margin-top: -100px;">Online Booking</h1>
            <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
                <input type="text" name="fname" placeholder="Firstname"> Date of Brith
                <input type="date" name="DoB" placeholder="Date of Birth">
                <input type="text" name="TelNumber" placeholder="Telephone number">
                <input type="email" name="email" placeholder="Email"> Date of Tour
                <input type="date" name="DoT" placeholder="Date of tour (dd.mm.yyyy)">
                <form action="" id="calculate" onsubmit="return false;">

                    <input type="text" placeholder="Number of Travellers" id="val" name="val" value="" />
                    <label class="radiolabel">
                        <input type="radio" name="button" value="100">McLaren</label>
                    <label class="radiolabel">
                        <input type="radio" name="button" value="150">Barossa</label>
                    <label class="radiolabel">
                        <input type="radio" name="button" value="90">Clare</label>
                    <div id="result" style="display: block;">
                        Result:</div>
                    <input type="submit" id="submit" value="Submit" onclick="endresult(document.forms['myForm'].elements['button']);">
        </div>

        </form>
        </div>

Where is your code? [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Xoog, Jan 18 '18 at 09:53
Once you've parsed the date, a person is 18 or over if year - dobYear is over 18 or if year - dobYear is 18, then if month - dobMonth is over 0 or if month - dobMonth is 0, day - dobDay is greater than or equal to 0. — Neil, Jan 18 '18 at 09:56
This question has already been answered: https://stackoverflow.com/questions/4060004/calculate-age-given-the-birth-date-in-the-format-yyyymmdd — DJDaveMark, Jan 18 '18 at 10:15
Possible duplicate of [Calculate age given the birth date in the format YYYYMMDD](https://stackoverflow.com/questions/4060004/calculate-age-given-the-birth-date-in-the-format-yyyymmdd) — DJDaveMark, Jan 18 '18 at 10:19
Just add 18 years to the date of birth and see if it's before today. There is no need to calculate the difference between the dates. — RobG, Jan 18 '18 at 11:55

score 2 · Answer 1 · answered Jan 18 '18 at 10:01

2

I would first calculate the age and then check if he is over 18. Here is a codesnippet.

var birthday1 = new Date("2015-03-25");
var birthday2 = new Date("1994-03-25");

function isOverEighteen(birthday) {
    var ageDifMs = Date.now() - birthday.getTime();
    var ageDate = new Date(ageDifMs);
    var age = Math.abs(ageDate.getUTCFullYear() - 1970);
    if(age > 17){
      return true;
    }else{
      return false;
    }
}

console.log(isOverEighteen(birthday1));
console.log(isOverEighteen(birthday2));

answered Jan 18 '18 at 10:01

Luigi Nator

103
1
7

Can help me and tell how I could apply the code above to my html. – Bartlomiej Kaczmarek Jan 18 '18 at 10:09
`new Date("2015-03-25")` will mostly be treated as UTC (but not by all browsers) where as *Date.now* is local. – RobG Jan 18 '18 at 12:15

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

There are many similar questions, but none seem to have good answers.

Rather than calculating age (which is actually tricker than many expect), you can either add 18 years to the date of birth and see if it's before today, or subtract 18 years from today and see if it's after the date of birth.

// Subtract 18 years from now and see if greater than birth date
function over18(birthDate) {
  var now = new Date();
  var m =  now.getMonth();
  now.setFullYear(now.getFullYear() - 18);
  // deal with today being 29 Feb
  if (m != now.getMonth()) now.setDate(0);
  return now > birthDate;
}

// Some tests
var opts = {day: '2-digit', month:'short', year:'numeric'};
[new Date(2000,1,29), // 29 Feb 2000
 new Date(2000,0,20), // 20 Jan 2000
 new Date(2000,0,19), // 19 Jan 2000
 new Date(2000,0,18), // 18 Jan 2000
 new Date(1999,0,1)   //  1 Jan 1999
].forEach(function(d) {
  console.log(d.toLocaleString('en-GB', opts), over18(d));
});

A simple improvement is to allow an optional checkDate that defaults to today and use that instead of now.

JavaScript Date of birth under 18

2 Answers2