CODEWITHSUNDEEP
javascriptselectdatepicker
Martin
Martin

Reputation: 557

Dynamically changing a datepicker depending the value selected on a dropdown

Am working on an application whereby am capturing 2 input fields on a form mainly a select dropdown list and a datepicker input field . The 2 fields are inter-related whereby am checking the value the user selected in the dropdown list before conditionally displaying the number of years on the datepicker.

For instance if the user selected a user from the dropdown of value Husband or Wife. I show, the datepicker with a minimum of 18 years and a maximum of 75 years. This is working fine.

If the user selected Son or Daughter, I want to show a maximum of 18 years in the datepicker. For instance we are in 2019, it should show year range between 16th April 2001 and 16th April 2019. This is not working as expected.

Markup code

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

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

Upvotes: 2

Views: 3704

Answers (4)

Anil Kumar Moharana
Anil Kumar Moharana

Reputation: 374

datepicker2datepickerThis works fine as per your requirement. it will show year range between 16th April 2001 and 16th April 2019 for son/daughter. Just add the else block and let me know CHECK IMAGE IT WORKS AS PER YOUR REQUIREMENT FOR SON/DAUGHTER.

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
        }

Upvotes: 0

Sami Ahmed Siddiqui
Sami Ahmed Siddiqui

Reputation: 2386

It is not working for you as the function is running when the page gets loaded and the initial value is Husband. So, whatever the user will be selected it doesn't make a difference. So first of all trigger this function on change event so whenever the user changes the dropdown, the date picker will change the result accordingly.

Secondly, add yearRange for defining the years from 2001 - 2019. Also, change values for the minDate() and maxDate() to restrict user for selecting any other date which doesn't comes in the range.

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

Upvotes: 1

PLASMA chicken
PLASMA chicken

Reputation: 2785

In the else { the today var was a bit messed up, aditionally i put the whole thing into a function like:

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

Then in the selector, I added an onchange event, due to otherwise the function only running when the page loads and so not updating the DatePicker if you change the dropdown:

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

And it seems to be working: PoW enter image description here

Upvotes: 0

Junius L
Junius L

Reputation: 16122

You need to set date yearRange in your else statement, and change maxDate to use 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 -->

Upvotes: 0

Related Questions