javascript - 根据在下拉列表中选择的值动态更改日期选择器

Question

我正在开发一个应用程序，通过该应用程序可以在表单上捕获 2 个输入字段，主要是 select dropdown list 和 datepicker input field 。这 2 个字段是相互关联的，因此在日期选择器上有条件地显示年数之前，我会检查用户在下拉列表中选择的值。

例如，如果用户从值 Husband 或 Wife 的下拉列表中选择了一个用户。我显示，日期选择器最小为 18 年，最大为 75 年。这工作正常。

如果用户选择了儿子或女儿，我想在日期选择器中最多显示 18 年。例如我们现在是 2019 年，它应该显示 2001 年 4 月 16 日到 2019 年 4 月 16 日之间的年份范围。这没有按预期工作。

标记代码

<!-- Gender -->
    <div class="row">
        <label class="fm-input"> Relation :</label>
        <select class="fmRelation" id="relation1" required>
            <option value="Husband"> Husband </option>
            <option value="Wife"> Wife </option>
            <option value="Son"> Son </option>
            <option value="Daughter"> Daughter </option>
        </select>
    </div>
<!-- END -->

<!-- Date of Birth-->
    <div class="row">
        <label class="fm-inputph3"> Date Of Birth :</label>
        <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
    </div>
<!-- END dob -->

Javascript 代码

<script>
//Check Date depending on relation
$(function(){
    var relation1 = $("#relation1").val(); 

    //User selected husband or wife from the dropdown
    if(relation1 == "Husband" || relation1 =="Wife"){
        var maxBirthdayDate = new Date();
        maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
        maxBirthdayDate.setMonth(11,31);
        $( function() {
            $( "#dob" ).datepicker({
                changeMonth: true,
                changeYear: true,
                //yy-mm-dd
                dateFormat: 'dd-mm-yy',
                //Maximum years to show (75 years) from current year
                minDate: maxBirthdayDate + '-75Y',
                maxDate: '-18Y',
                yearRange: '1900:'+maxBirthdayDate.getFullYear()
            });
        });
    }
    //Otherwise son and Daughter was selected
    else{
        var today = new Date();
        today.setFullYear(today.getFullYear() -18);
        today.setMonth();

        var maxBirthdayDate = new Date();
        maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
        maxBirthdayDate.setMonth(11,31);

        $( function() {
            $( "#dob" ).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                minDate: today,
                maxDate: '-18Y'   
            });
        });
        //End dob
    }
});
</script>

Answer 1

当页面加载且初始值为 Husband 时，function 正在运行，因此它不适合您。因此，无论用户将被选择什么，都没有什么不同。因此，首先在 change 事件上触发此函数，以便每当用户更改下拉列表时，日期选择器都会相应地更改结果。

其次，添加 yearRange 以定义从 2001 年到 2019 年的年份。此外，更改 minDate() 和 maxDate() 的值限制用户选择不在该范围内的任何其他日期。

//Check Date depending on relation
$(function(){
    $("#relation1").on("change", function() {        
        var relation1 = $("#relation1").val(); 
        //User selected husband or wife from the dropdown
        if(relation1 == "Husband" || relation1 =="Wife"){
            var maxBirthdayDate = new Date();
            maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
            maxBirthdayDate.setMonth(11,31);
            $( function() {
                $("#dob").datepicker("destroy");
                $( "#dob" ).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    //yy-mm-dd
                    dateFormat: 'dd-mm-yy',
                    //Maximum years to show (75 years) from current year
                    minDate: maxBirthdayDate + '-75Y',
                    maxDate: '-18Y',
                    yearRange: '1900:'+maxBirthdayDate.getFullYear()
                });
            });
        }
        //Otherwise son and Daughter was selected
        else{
            var today = new Date();
            var minYear = today.getFullYear() - 18;
            var minMonth = today.getMonth();
            var minDate = today.getDate();

            var maxYear = today.getFullYear();
            var maxMonth = today.getMonth();
            var maxDate = today.getDate();

            $( function() {
                console.log(minDate, today)
                $("#dob").datepicker("destroy");
                $( "#dob" ).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd-mm-yy',
                    minDate: new Date(minYear, minMonth, minDate),
                    maxDate: new Date(maxYear, maxMonth, maxDate),
                    yearRange: minYear + ':' + today.getFullYear() + ''
                });
            });
            //End dob
        }
    });
    $("#relation1").trigger("change");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Gender -->
<div class="row">
    <label class="fm-input"> Relation :</label>
    <select class="fmRelation" id="relation1" required>
        <option value="Husband"> Husband </option>
        <option value="Wife"> Wife </option>
        <option value="Son"> Son </option>
        <option value="Daughter"> Daughter </option>
    </select>
</div>
<!-- END -->

<!-- Date of Birth-->
<div class="row">
    <label class="fm-inputph3"> Date Of Birth :</label>
    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
</div>
<!-- END dob -->