0

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
  • 31,095
  • 13
  • 107
  • 185
glitchy
  • 161
  • 3
  • 12

1 Answers1

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);
Nickolay
  • 31,095
  • 13
  • 107
  • 185
  • 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 Aug 11 '19 at 15:26
  • 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 Aug 11 '19 at 15:32
  • How? in my case? – glitchy Aug 11 '19 at 15:42
  • I have no idea what your case is.. Ask another question with enough details on what you're expecting to happen. – Nickolay Aug 11 '19 at 15:45
  • 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)` – glitchy Aug 11 '19 at 15:51
  • Add 0 where? If you need to replace the value in the ``, the last snippet you posted should be fine. If you need the birthday calculation to use 0 when the months field is empty, your previous code `var monthval = $("#month").val() || 0;` should work. – Nickolay Aug 11 '19 at 15:56