Soy nuevo en vue.js. Tengo un formulario que tiene dos campos de entrada de fecha como Fecha de entrega y Fecha de golpe .
Quiero configurar la fecha de golpe automáticamente dos días antes de la fecha de entrega. Por ejemplo, si la fecha de entrega es el 20/9/2021, la fecha de entrega debe ser el 18/9/2021.
¿Cómo implementar esto en vue.js?
Estos son los campos del formulario que se indican a continuación:
<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>Es fácil de calcular con 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>Prueba como el siguiente fragmento:
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>