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

user_14674141 0
Viewed 48

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>
twitter-bootstrap forms html jquery javascript
1 Answers

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>

user_134787560
Related