Блог

Главная - Вопросы по программированию - установите дату стука за два дня до даты доставки в vue.js

установите дату стука за два дня до даты доставки в vue.js

#javascript #vue.js

Вопрос:

Я новичок в vue.js. У меня есть форма, в которой есть два поля ввода даты, такие как Дата доставки и дата отправки.

Я хочу автоматически установить дату отправки за два дня до даты доставки. Например, если дата доставки 20/9/2021, дата отправки должна быть 18/9/2021.

Как реализовать это в vue.js ?

Вот поля формы, приведенные ниже:

 <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>

Ответ №1:

Попробуйте, как в следующем фрагменте:

 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>

Ответ №2:

Это легко рассчитать с помощью 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>

Метки: