日期月份年份下拉列表类型日期选择器

Question

有没有办法创建一个包含所有三个下拉列表（日期月份和年份）的日期选择器，我可以通过JS/前端验证将输入的最低年龄限制为18岁？

Answer 1

使用javascript/jQuery：

滑动分页

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="date" name="yourfieldname" class="hidden">
<select class="chan" id="d">
    <option value="30">30</option>
    <option value="28">28</option>
</select>
<select class="chan" id="m">
    <option value="11">11</option>
    <option value="12">12</option>
</select>
<select class="chan" id="y">
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>
<script>
    $(document).ready(function () {
        $(document).on('change',".chan",function () {
            $("#date").val($("#d").val()+"/"+$("#m").val()+"/"+$("#y").val());
        })
    })
</script>

Answer 2

请用这把小提琴

var d = new Date();
var year = d.getFullYear() - 18;
d.setFullYear(year);

		 $("#lastReporteddate").datepicker({ dateFormat: "dd",
		    changeMonth: true,
		    changeYear: true,
		    maxDate: year,
		    minDate: "-100Y",
            yearRange: '-100:' + year + '',
            defaultDate: d
		 });
     $("#lastReportedmonth").datepicker({ dateFormat: "mm",
		    changeMonth: true,
		    changeYear: true,
		    maxDate: year,
		    minDate: "-100Y",
            yearRange: '-100:' + year + '',
            defaultDate: d
		 });
     $("#lastReportedyear").datepicker({ dateFormat: "yy",
		    changeMonth: true,
		    changeYear: true,
		    maxDate: year,
		    minDate: "-100Y",
            yearRange: '-100:' + year + '',
            defaultDate: d
		 });

$("#button").click(function(){
        var dob = $("#lastReporteddate").val();
        var mob = $("#lastReportedmonth").val();
        var yob = $("#lastReportedyear").val();
        var now = new Date();
        /* var birthdate = dob.split("/"); */
        var born = new Date(yob, mob-1, dob);
        age=get_age(born,now);
     
        console.log(yob+" : "+mob+" : "+dob);
        console.log(born);
    		console.log(age);
        
        if (age<=18)
        {
       alert("Input Error - Age should be greater then or equal to 18");
            return false;
        }
});


    function get_age(born, now) {
      var birthday = new Date(now.getFullYear(), born.getMonth(), born.getDate());
      if (now >= birthday) 
        return now.getFullYear() - born.getFullYear();
      else
        return now.getFullYear() - born.getFullYear() - 1;
    }

html lang-html prettyprint-override">Date of Birth (DD): 
 <input type="text" class="datepicker minimumSize" name="BirthDate" id="lastReporteddate"/>
 Month (MM):
 <input type="text" class="datepicker minimumSize" name="BirthDate" id="lastReportedmonth"/>
 Year of Birth (YYYY):
 <input type="text" class="datepicker minimumSize" name="BirthDate" id="lastReportedyear"/>
<input type="submit" id="button">

Answer 3

试试这个：

$('#dob2').datepicker("option", "onSelect", function(dateText, inst) {
var dob = $(this).datepicker('getDate');
var age = GetAge(dob);
if (age >= 16 && age < 18) {
      alert("The minimum age requirement for supplementary card applicant is 18 years old. For applicant aged 16 and 17, and are going overseas to study, please submit the letter of acceptance from the education institution.");
   }
});

function GetAge(birthDate) {
var today = new Date();
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
}
return age;
}