日期月份年份下拉类型日期选择器答案

【问题标题】：Date Month Year Dropdown Type Date Picker日期月份年份下拉类型日期选择器
【发布时间】：2018-09-04 06:21:35
【问题描述】：

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

【问题讨论】：

你需要什么...请详细说明

标签： javascript jquery html bootstrap-4 frontend

【解决方案1】：

试试这个：

$('#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;
}

【讨论】：

【解决方案2】：

请使用这个fiddle

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;
    }

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">

【讨论】：

【解决方案3】：

使用javascript/jquery：

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>

【讨论】：