在開發過程中，有時需要對日期選擇框設定一個預設值（比如當天、前幾天或者是後幾天）？如何自動計算過期時間？具體怎麼實作呢，我們一起來看下。
本文主要根據兩個小案例來講解通過js設定日期控件的值，1是設定操作日期的預設值為當天；2是根據商品生産日期和保存期限，自動計算出過期時間。
1.前端頁面
首先我們在前端頁面上添加四個元件，分别為生産日期、保存期限、過期時間、操作時間。代碼如下：
<template>
<div class="app-container">
<span style="margin-left:120px;margin-right: 20px;width: 100px;display: inline-block;">生産日期：</span>
<el-date-picker type="date" placeholder="物資生産日期"
v-model="productTime"
style="margin-bottom:30px;width: 15%;"
@blur="calculateExpireTime"/>
<span style="margin-left:20px;margin-right: 20px;width: 100px;display: inline-block;">質保期：</span>
<el-input v-model="validPeriod" type="text"
style="margin-bottom:30px; width: 10%;"
placeholder="機關（月）"
oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
@blur="calculateExpireTime"/>
<span style="margin-left:20px;margin-right: 20px;width: 80px;display: inline-block;">過期時間：</span>
<el-date-picker type="date" placeholder="物資過期時間" disabled="" v-model="expiredTime" style="margin-bottom:30px;width: 15%;"/>
<br>
<span style="margin-left:120px;margin-right: 20px;width: 100px;display: inline-block;">操作日期：</span>
<el-date-picker type="date" placeholder="卡生效日期" v-model="operateTime" style="margin-bottom:30px;width: 15%;"/>
</div>
</template>
頁面截圖如下所示：
頁面中，隻是用了日期控件，沒有展示時分秒，具體的日期控件，可以參考官網文檔。
頁面中的data如下：
data() {
return {
productTime: null,
validPeriod: '',
expiredTime: '',
operateTime:'',
listLoading: true
}
}
2.設定預設時間
設定頁面時間有兩種方式，一是設定為日期格式、二是設定為字元串。js代碼如下所示：
getCurrentTime () {
const date = new Date();
let month = parseInt(date.getMonth() + 1);
let day = date.getDate();
if (month < 10) month = '0' + month
if (day < 10) day = '0' + day
//設定為字元串
//this.operateTime = date.getFullYear() + '-' + month + '-' + day
//設定為日期
this.operateTime = date
},
兩種方式前端展示是相同的，差別在于傳給背景接口時的值不同。下面是兩種方式列印的json字元串。
//1.字元串
{"productTime":null,"validPeriod":"","expiredTime":"","operateTime":"2021-07-29"}
//2.日期
{"productTime":null,"validPeriod":"","expiredTime":"","operateTime":"2021-07-29T09:12:22.492Z"}
此外還需要在create生命函數中調用下getCurrentTime方法。
3.計算過期日期
此功能是選擇生産日期和保存期限，自動計算出過期時間。我們先來看下calculateExpireTime函數，此函數是兩個輸入框綁定的blur事件觸發的。
calculateExpireTime(){
//根據生産日期和過期時間，計算出物資的過期時間
console.log("生産時間：", this.productTime.getFullYear(), this.productTime.getMonth(), this.productTime.getDate())
//注意：不可直接将productTime的值指派給date,會存在類似值引用的問題，讀者可以自行試一下
//let date = this.productTime
let date = new Date(this.productTime.getFullYear(), this.productTime.getMonth(), this.productTime.getDate())
console.log("目前時間：", date)
const months = this.validPeriod === '' ? 0 : parseInt(this.validPeriod)
//按照自然月計算
this.expiredTime = date.setMonth(date.getMonth() + months)
//按照每月31天計算，類似于愛奇藝、QQ會員的計算方式
//this.expiredTime = date.setDate(date.getDate() + months * 31)
}
在上圖中一定要注意，不可直接将productTime的值指派給date，否則會産生奇怪的錯誤，讀者可以自行嘗試。上面代碼中存在兩種計算過期時間的方式，一是按照自然月計算、而是按照每月31天計算。兩種方式的計算結果如下圖所示。
如果需要前向計算，如獲得前幾天的日期，date.setDate(date.getDate() + months * 31)其中的加号改成減号即可。
4.一個完整的demo
<template>
<div class="app-container">
<span style="margin-left:120px;margin-right: 20px;width: 100px;display: inline-block;">生産日期：</span>
<el-date-picker type="date" placeholder="物資生産日期"
v-model="productTime"
style="margin-bottom:30px;width: 15%;"
@blur="calculateExpireTime"/>
<span style="margin-left:20px;margin-right: 20px;width: 100px;display: inline-block;">質保期：</span>
<el-input v-model="validPeriod" type="text"
style="margin-bottom:30px; width: 10%;"
placeholder="機關（月）"
οninput="value=value.replace(/^\.+|[^\d.]/g,'')"
@blur="calculateExpireTime"/>
<span style="margin-left:20px;margin-right: 20px;width: 80px;display: inline-block;">過期時間：</span>
<el-date-picker type="date" placeholder="物資過期時間" disabled="" v-model="expiredTime" style="margin-bottom:30px;width: 15%;"/>
<br>
<span style="margin-left:120px;margin-right: 20px;width: 100px;display: inline-block;">操作日期：</span>
<el-date-picker type="date" placeholder="卡生效日期" v-model="operateTime" style="margin-bottom:30px;width: 15%;"/>
<br>
<el-button type="primary" round style="margin-left:280px" @click.native.prevent="commit">添加</el-button>
<el-button type="primary" round style="margin-left:100px" @click.native.prevent="cancel">取消</el-button>
</div>
</template>
<script>
import {Loading} from 'element-ui'
export default {
data() {
return {
productTime: null,
validPeriod: '',
expiredTime: '',
operateTime:'',
listLoading: true
}
},
created() {
this.getCurrentTime()
},
methods: {
calculateExpireTime(){
//根據生産日期和過期時間，計算出物資的過期時間
console.log("生産時間：", this.productTime.getFullYear(), this.productTime.getMonth(), this.productTime.getDate())
//注意：不可直接将productTime的值指派給date,會存在類似值引用的問題，讀者可以自行試一下
//let date = this.productTime
let date = new Date(this.productTime.getFullYear(), this.productTime.getMonth(), this.productTime.getDate())
console.log("目前時間：", date)
const months = this.validPeriod === '' ? 0 : parseInt(this.validPeriod)
//按照自然月計算
//this.expiredTime = date.setMonth(date.getMonth() + months)
//按照每月31天計算，類似于愛奇藝、QQ會員的計算方式
this.expiredTime = date.setDate(date.getDate() + months * 31)
},
getCurrentTime () {
const date = new Date();
let month = parseInt(date.getMonth() + 1);
let day = date.getDate();
if (month < 10) month = '0' + month
if (day < 10) day = '0' + day
//this.operateTime = date.getFullYear() + '-' + month + '-' + day
this.operateTime = date
},
commit() {
//禁用按鈕點選事件
const postData = {
productTime: this.productTime,
validPeriod: this.validPeriod,
expiredTime: this.expiredTime,
operateTime: this.operateTime
}
console.log(JSON.stringify(postData))
}
}
}
</script>