Vue.js如何实现输入送货日期后自动设置提前2天的Knock提醒日期

实现思路 #

通过监听送货日期字段的变化，自动计算出提前2天的提醒日期并赋值即可，以下是完整可运行的代码：

<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 default {
  data() {
    return {
      // 初始化两个表单绑定变量
      PO_DeliveryData: '',
      knock_Date: ''
    }
  },
  watch: {
    // 监听送货日期的变化
    PO_DeliveryData(newVal) {
      if (!newVal) {
        // 送货日期为空时清空提醒日期
        this.knock_Date = ''
        return
      }
      // 转换为日期对象计算
      const deliveryDate = new Date(newVal)
      // 往前推2天，单位为毫秒
      const knockDate = new Date(deliveryDate.getTime() - 2 * 24 * 60 * 60 * 1000)
      // 格式化为yyyy-MM-dd格式适配date输入框的取值要求
      this.knock_Date = knockDate.toISOString().split('T')[0]
    }
  }
}
</script>

补充说明 #

• 原生type="date"的输入框只识别yyyy-MM-dd格式的字符串，所以计算完日期后需要做格式转换
• 如果你的项目中用到了dayjs、moment等日期处理库，也可以直接用库的API做日期计算，代码会更简洁，比如用dayjs的话，计算逻辑可以写成this.knock_Date = dayjs(newVal).subtract(2, 'day').format('YYYY-MM-DD')

内容的提问来源于stack exchange，提问作者alprazolam