Change date in datepicker dynamically by input value

Question

I have date of birth calculator which works well to calculate user's age in Years, Months and Days (23 Years, 11 Months, 5 Days) in their respective fields however I want is whenever user inputs value in Years, Months or Days field, date picker date should dynamically change.

I have tried to subtract date from Date Object but it's not working.

$(document).ready(function(){
    $('#day').keydown(function (event) {
        if (event.which === 13) {
            var dayval = $("#day").val();
            var monthval = $("#month").val();
            var yearval = $("#year").val();
            var sync = $('#dtpicker').datepicker({
                dateFormat: 'dd-mm-yy'
            });
            var today = new Date();
            var substractday = today - dayval
            var substractmonth = today - monthval
            var substractyear = today - yearval
            $("#dtpicker").val(substractday);
            $("#dtpicker").val(substractmonth);
            $("#dtpicker").val(substractyear);
        }
    });
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
    <div>
        <input type="text" name="dob" id="dtpicker">
    </div>
    <div>
        <input type="text" name="year" id="year" placeholder="Enter Your Age in Year">
    </div>
    <div>
        <input type="text" name="month" id="month" placeholder="Enter Your Age in Month">
    </div>
    <div>
        <input type="text" name="day" id="day" placeholder="Enter Your Age in Day">
    </div>
</div>

Datepicker date should auto calculate it's date according to user's input, eg. Today's date in datepicker is 11-08-2019 (dd-mm-yy) if user enters "1" in year field it should calculate date as 11-8-2018 in datepicker.

Nickolay · Accepted Answer · 2019-08-11 14:01:11Z

1

You need something like Add year to todays date to calculate the date from the difference in years, and https://api.jqueryui.com/datepicker/#method-setDate to set the datepicker's value:

var today = new Date();
let birthday = new Date(today.getFullYear() - yearval,
                        today.getMonth() - monthval, 
                        today.getDate() - dayval);
$("#dtpicker").datepicker("setDate", birthday);

answered Aug 11, 2019 at 14:01

Nickolay

32.5k13 gold badges111 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

glitchy Over a year ago

Amazing! it's working but if month is blank while saving it throws an error Integrity constraint violation: 1048 Column 'month' cannot be null I tried var monthval = $("#month").val() || 0; still same error also getDate from datepicker not matching with setDate method above getting 1 day difference.

glitchy Over a year ago

can you please tell me how to set 0 (Zero) value if there is no value in that field using jQuery? It will solve my problem.

glitchy Over a year ago

How? in my case?

Nickolay Over a year ago

I have no idea what your case is.. Ask another question with enough details on what you're expecting to happen.

glitchy Over a year ago

My case is when there is not value in input fields mentioned above, using jQuery should add 0(zero) as a default value btw your previous comment meant this? $("#month").val($("#month").val() || 0)

|

Collectives™ on Stack Overflow

Change date in datepicker dynamically by input value

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related