javascript - Change Value of two inpu Fields in a Formular with Javascribt or jquery

Question

I have a form with 2 input fields of the type date (date1 and date2).

I have different buttons. If you click on these buttons, values ??should be entered in the form fields.

When the button is clicked, the current date should be inserted in the "date2" field. The current date minus 3 days should be inserted in the "date1" input field.

The date must be in the format "2018-01-22".

The other buttons are similar, only that a different number of days should be deducted.

I know that I need java script for this. Unfortunately, I don't know anything about it.

<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumvon" class="col-form-label">Datum von: </label>
<input type="date" class="form-control ml-2 col-6" id="datumvon">
</div>
    
<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumbis" class="col-form-label">Datum bis: </label>
<input type="date" class="form-control ml-2 col-6" id="datumbis">
</div>

<button type="button" class="btn btn-outline-dark">3 Tage</button>
<button type="button" class="btn btn-outline-dark">7 Tage</button>
<button type="button" class="btn btn-outline-dark">14 Tage</button>
<button type="button" class="btn btn-outline-dark">30 Tage</button>
<button type="button" class="btn btn-outline-dark">90 Tage</button>

question from:https://stackoverflow.com/questions/65887229/change-value-of-two-inpu-fields-in-a-formular-with-javascribt-or-jquery

Answer 1

Some arifmetic like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumvon" class="col-form-label">Datum von: </label>
<input type="date" class="form-control ml-2 col-6" id="datumvon">
</div>
    
<div class="form-group col-6 col-md-4 col-lg-3">
<label for="datumbis" class="col-form-label">Datum bis: </label>
<input type="date" class="form-control ml-2 col-6" id="datumbis">
</div>

<button type="button" class="btn btn-outline-dark" id="3-tage">3 Tage</button>
<button type="button" class="btn btn-outline-dark" id="7-tage">7 Tage</button>
<button type="button" class="btn btn-outline-dark" id="14-tage">14 Tage</button>
<button type="button" class="btn btn-outline-dark" id="30-tage">30 Tage</button>
<button type="button" class="btn btn-outline-dark" id="90-tage">90 Tage</button>

<script>

function updateDefaults(daysCount){
  let now = new Date();
  let day = ("0" + now.getDate()).slice(-2);
  let month = ("0" + (now.getMonth() + 1)).slice(-2);
  let today = now.getFullYear()+"-"+(month)+"-"+(day) ;
  
  $("#datumbis").val(today); 
  
  let laterNow = new Date(now.getTime() - daysCount*24*60*60*1000);
  let laterDay = ("0" + laterNow.getDate()).slice(-2);
  let laterMonth = ("0" + (laterNow.getMonth() + 1)).slice(-2);
  let laterToday = laterNow.getFullYear()+"-"+(laterMonth)+"-"+(laterDay) ;
  
  $("#datumvon").val(laterToday);
}

$("#3-tage").click(()=> { 
   updateDefaults(3)
})

$("#7-tage").click(()=> { 
 updateDefaults(7)
})


$("#14-tage").click(()=> { 
 updateDefaults(14)
})

$("#30-tage").click(()=> { 
 updateDefaults(30)
})

$("#90-tage").click(()=> { 
 updateDefaults(90)
})


</script>