在vue.js中設定交付日期前兩天的敲門日期 -有解無憂

我是vue.js的新手。我有一個表單，其中有兩個日期輸入欄位，如交付日期和敲擊日期。

我想在交付日期前兩天自動設定敲門日期。例如，如果交貨日期是20/9/2021，敲門日期應該是18/9/2021。

如何在vue.js中實作這一點？

下面是給出的表格欄位：

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

}
</script>

uj5u.com熱心網友回復：

用momentjs計算很容易

<template>
  <form> 
    <label for=""/span>> PO交貨日期</label>。
    <input
      v-model="deliveryDate"。
      class="form-control"/span>
      type="date" 
      placeholder="PO Delivery Date"
    /><br />>

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

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

<script>。
import moment from "moment"/span>。

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

uj5u.com熱心網友回復：

試試下面的代碼段：

new Vue（{
  el: '#demo',
  data（） {
    return {
      PO_DeliveryData: ''/span>,
      knock_Date: '', 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>/span>
<div id="demo">/span> 
  <form>/span>   
    <label for=""/span>> PO交貨日期</label>。
    <input
        class="form-control" 
        type="date" 
        v-model="PO_DeliveryData"。
        placeholder="PO Delivery Date"。
    /><br />>

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/327387.html

標籤：

上一篇：如何在javascript中獲取日期范圍內的資料

下一篇：禁用按鈕，直到回應VUE