Question

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

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

Answer 2

请使用此fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

日期月份下拉类型日期选择器

3 个答案: