How do I restrict the allowed age when inputting date of birth-CodePudding

<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">

How do I make it where the only allowed ages are between 15 and 80 at the time of filling the form.

CodePudding user response：

You will need Javascript to achieve what you want:

HTML:

<html>

<head>
  <script src="./<your-external-js-file>"></script>
</head>

<body>

  <form>
    <label for="start">Date of birth:</label>
    <input type="date" id="start" required="required" name="trip-start" value="2021-10-02" />
    <input type="submit" />
  </form>
  
</body>

</html>

Add this to your external JS file:

window.onload = function() {
      var date = new Date();
      var dd = date.getDate();
      var mm = date.getMonth()   1;
      var yyyy = date.getFullYear();

      //Add a zero if one Digit (eg: 05,09)
      if (dd < 10) {
        dd = "0"   dd;
      }

      //Add a zero if one Digit (eg: 05,09)
      if (mm < 10) {
        mm = "0"   mm;
      }

      minYear = yyyy - 80; //Calculate Minimun Age (<80)
      maxYear = yyyy - 18; //Calculate Maximum Age (>18)

      var min = minYear   "-"   mm   "-"   dd;
      var max = maxYear   "-"   mm   "-"   dd;

      document.getElementById("start").setAttribute("min", min);
      document.getElementById("start").setAttribute("max", max);
    };

By doing this, whenever your document will get loaded, this function will be executed, which will calculate the minimum (age<80) and maximum dates (age>18) from the current date, according to the formula applied and set the 'min' and 'max' attributes to our input field.

CodePudding user response：

$("#start").change(function(){
  var userboddate = $(this).val();
  var useryear=  userboddate.split('-')[0] ;
  var currentyear ='2021';
 var diff=currentyear-useryear; 
  if(diff>=15 && diff<=80){
    alert(`correct age ${diff}`);
    
  }
  else{
    alert(`wrong age ${diff}`);
    $("#start").val('');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="age">
<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">
<input type="submit" value="submit">
</form>

<!- i hope this code help you ->