Динамическое изменение указателя даты в зависимости от значения, выбранного в раскрывающемся списке

Question

Я работаю над приложением, в котором я собираю 2 поля ввода в форме, в основном из выберите раскрывающийся список и поле ввода даты .Эти 2 поля связаны между собой тем, что am проверяет значение, выбранное пользователем в раскрывающемся списке до , условно отображая количество лет в средстве выбора даты.

Например, если пользователь выбрал пользователя из выпадающего списка значения Муж или Жена .Я показываю, DatePicker минимум 18 лет и максимум 75 лет.Это работает нормально.

Если пользователь выбрал «Сын» или «Дочь», я хочу показать максимум 18 лет в средстве выбора даты.Например, мы находимся в 2019 году, он должен показывать диапазон между 16 апреля 2001 года и 16 апреля 2019 года. Это не работает должным образом.

Код разметки

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

datepicker2 datepicker Это отлично работает в соответствии с вашими требованиями. он покажет диапазон между 16 апреля 2001 года и 16 апреля 2019 года для сына / дочери. Просто добавьте блок 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
        }

Answer 2

Вам нужно установить дату yearRange в своем операторе else и изменить 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 3

В else { сегодняшняя переменная была немного испорчена, кроме того, я поместил все это в функцию вроде:

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

Это не работает для вас, так как 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 5

Во второй функции выбора даты у вас неправильные значения minDate и maxDate.Это должно быть minDate: '-18y-', maxDate:today, а не наоборот.

А также today можно заменить, например, '0y'.