set knock date two days before delivery date in vue.js

Issue

I am new to vue.js.
I have a form that has two date input fields like Delivery date and Knock date.

I want to set knock date automatically two days before delivery date. For example if the delivery date is 20/9/2021, the knock date should be 18/9/2021.

How to implement this in vue.js ?

Here are the form fields given below:

<template> 
<form>   
<label for="">PO Delivery Date</label>
<input
    class="form-control"
    type="date"
    v-model="PO_DeliveryData"
    v-validate="'required'"
    placeholder="PO Delivery Date"
/><br />
    
<label for="">Knock Date</label>
<input
   class="form-control"
   type="date"
   v-model="knock_Date"
   v-validate="'required'"
   placeholder="Knock Date"
/><br />
</form>
</template>
<script>
export defaults:{

}
</script>

Solution

Try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      PO_DeliveryData: '',
      knock_Date: ''
    }
  },
  watch: {
    PO_DeliveryData() {
      let d = new Date(this.PO_DeliveryData);
      d.setDate(d.getDate() - 2);
      this.knock_Date = d.toISOString().slice(0, 10)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"> 
  <form>   
    <label for="">PO Delivery Date</label>
    <input
        class="form-control"
        type="date"
        v-model="PO_DeliveryData"
        placeholder="PO Delivery Date"
    /><br />

    <label for="">Knock Date</label>
    <input
       class="form-control"
       type="date"
       v-model="knock_Date"
       placeholder="Knock Date"
    /><br />
  </form>
</div>

Answered By – Nikola Pavicevic

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0