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>

CodePudding user response：

It's easy to calculate with momentjs

<template>
  <form>
    <label for="">PO Delivery Date</label>
    <input
      v-model="deliveryDate"
      class="form-control"
      type="date"
      placeholder="PO Delivery Date"
    /><br />

    <label for="">Knock Date</label>
    <input
      :value="knockDate"
      class="form-control"
      type="date"
      placeholder="Knock Date"
    />

    <pre>deliveryDate: {{ deliveryDate }}</pre>
    <pre>knockDate: {{ knockDate }}</pre>
  </form>
</template>

<script>
import moment from "moment";

export default {
  name: "App",
  data: () => {
    return {
      deliveryDate: "",
      knockDate: "",
    };
  },
  watch: {
    deliveryDate(val) {
      if (val) {
        this.knockDate = moment(val, "YYYY-MM-DD")
          .subtract(2, "day")
          .format("YYYY-MM-DD");
      } else {
        this.knockDate = "";
      }
    },
  },
};
</script>

CodePudding user response：

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>