根据下拉菜单中选择的值动态更改日期选择器

Question

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

例如，如果用户从值丈夫或妻子的下拉列表中选择了一个用户。我显示，日期选择器的最小长度为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

在第二个日期选择器功能中，您输入了“ minDate”和“ maxDate”错误。应该是minDate: '-18y-', maxDate:today，而不是相反。

例如，today也可以替换为'0y'。

Answer 2

在else {中，今天的var有点混乱，最终我将整个东西放到一个函数中，例如：

<script>
//Check Date depending on relation
function updateDatePicker(){
    $(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);
                $( "#dob" ).datepicker("destroy"); // Destroy the DatePicker to then change its values
                $( "#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 maxBirthdayDate = new Date();
            maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
            maxBirthdayDate.setMonth(11,31);

                $("#dob").datepicker("destroy"); // Destroy the DatePicker to then change its values
                $( "#dob" ).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd-mm-yy',
                    minDate: '-18Y',
                    maxDate: today
                });
            //End dob
        }
    });
}
updateDatePicker()
</script>

然后在选择器中添加了onchange event，因为否则该功能仅在页面加载时运行，因此如果更改下拉列表，则不会更新DatePicker：

<div class="row" onchange="updateDatePicker()">
    <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>

它似乎正在工作：

Answer 3

当页面加载且初始值为function时，Husband正在运行，因此它对您不起作用。因此，无论选择了哪个用户，都没有什么不同。因此，首先在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 -->

Answer 4

您需要在else语句中设置日期yearRange，并将maxDate更改为使用new Date()

$('#relation1').on('change', function() {


  let relation1 = $("#relation1").val();
  let minusDate = 18;

  //User selected husband or wife from the dropdown
  if (relation1 == "Husband" || relation1 == "Wife") {
    minusDate = 75;
  }

  let today = new Date();
  today.setFullYear(today.getFullYear() - minusDate);
  
  $("#dob").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd-mm-yy',
    minDate: today,
    maxDate: new Date(),
    yearRange: today.getFullYear() + ':' + new Date().getFullYear()
  });
});

<!-- 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>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- END dob -->

Answer 5

datepicker2 datepicker，按您的要求可以正常工作。它将显示2001年4月16日至2019年4月16日之间的儿子/女儿的年份范围。只需添加else块，让我知道 根据您对儿子/女儿的要求检查图像是否正常工作。

else{
         var today = new Date();
         var mindate=new Date();
         mindate.setFullYear(today.getFullYear()-18);
         mindate.setMonth(today.getMonth());

            $( function() {
                $( "#dob" ).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd-mm-yy',
                    minDate:mindate,
                    maxDate:today 

                });
            });
            //End dob
        }