<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.
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.
$("#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 ->