Javascript add year to date and put in html input

Question

In a view, I have a date that the user must enter. What I want is that the other dates are automatically filled in with +2 years for one and +5 years for another.

Thank you for your help.

html

<input type="date" th:field="*{date_fabrication}" class="form-control 
    col-xs-3 col" id="fabId"
        th:onblur="majdates()"
        th:errorclass="invalid"
        th:placeholder="#{fabricationEquipment}"
        style="width: 200px;font-size:12px;"
        required>

function

<script>
    function majdates() {
        var recupDate = document.getElementById("fabId").value;
        var plusTwoYears = recupDate.setFullYear(date.getFullYear() + 2);
        document.getElementById("commissioningId").value = plusTwoYears;

    }
</script>

edit : the target date :

<input type="date" th:field="*{date_mise_en_service}" class="form-control col"
    id="commissioningId"
    th:errorclass="invalid"
    th:placeholder="#{commissioningEquipment}"
    style="width: 200px;font-size:12px;">

thanks to Rory, the solution below

<script>

document.querySelector('#fabId').addEventListener('blur', e => {
    var recupDate = new Date(e.target.value);
    var plusTwoYears = new 
Date(recupDate.setFullYear(recupDate.getFullYear() + 2));
    var formatedPlusTowYears =plusTwoYears.toISOString().slice(0,10);
    document.querySelector("#commissioningId").value = formatedPlusTowYears;
    document.querySelector("#volumeId").value = formatedPlusTowYears;
});
</script>

Rory McCrossan · Accepted Answer · 2021-06-24 07:54:41Z

3

Your code is almost there. The main issue is that recupDate will be a string. You need to parse it to a Date object in order to call setFullYear on it.

Also note that the result of setFullYear() will be an epoch timestamp, not a date, so you'll again need to parse the response of that to a Date object - and possibly format it manually depending on the output required.

document.querySelector('#fabId').addEventListener('blur', e => {
  var recupDate = new Date(e.target.value);  
  var plusTwoYears = new Date(recupDate.setFullYear(recupDate.getFullYear() + 2));
  document.querySelector("#commissioningId").value = plusTwoYears;
});

input {
  width: 200px;
  font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="form-control col-xs-3 col" id="fabId" required />

<input type="text" readonly id="commissioningId" />

Finally, I also changed the logic to use an unobtrusive event handler instead of the onblur attribute, as the latter are no longer good practice.

edited Jun 24, 2021 at 7:54

answered Jun 24, 2021 at 7:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

manuel antunes Over a year ago

First of all, thank you for your quick and clear answer. I have one more concern if I may say so. If I push the new date on a text field, everything is ok but even if I reformat the date on the format I use (FR) my target field is not populated

manuel antunes Over a year ago

yeah ! sure, i'm pretty stu... :) i am using toLocaleDateString (FR)where my date is in US (ISO) format. i then try to put 01/01/1900 in a 1900-01-01 format

manuel antunes Over a year ago

it's all good i edited the code with the changes another time : thanks a lot

Collectives™ on Stack Overflow

Javascript add year to date and put in html input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related