element ui日期元件
阿新 • 來源:網路 • 發佈:2022-05-26
對日期進行了預處理(將起始的預設時間設定為當前時間,結束時間的預設時間設定為往一個月後),即使是點選了時間也不會報錯
執行圖效果

vue檔案
<template>
<div>
<label>開始時間</label>
<el-date-picker
v-model="startTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
style="width: 200px"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<label>過期時間</label>
<!-- 如果我們給其中的一個日期設定了預設值,那麼就儘量不要再去給他使用value-format了,不然就會報錯,因為他是string型別,我們可以在發起請求的時候將資料轉化為後端想要的資料傳過去,例子如下 -->
<el-date-picker
v-model="endTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
style="width: 200px"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<el-button @click="find">查詢</el-button>
</div>
</template>
<script>
export default {
data() {
return {
startTime: "",
endTime: "",
}
},
methods: {
// 格式化時間,獲取當前時間的一個月後的時間值
convertToLateDate() {
var data = new Date()
var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30)
// 以上兩行程式碼為關鍵程式碼,若想要返回一天後的時間,則可以將第二行程式碼更換為下面程式碼
// var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000);
// 若是想要返回值為當前時間,則上面兩行程式碼可以直接修改為下面程式碼即可。
// var Da = new Date()
var y = Da.getFullYear()
var m = Da.getMonth() + 1
var d = Da.getDate()
var H = Da.getHours()
var mm = Da.getMinutes()
var ss = Da.getSeconds()
m = m < 10 ? "0" + m : m
d = d < 10 ? "0" + d : d
H = H < 10 ? "0" + H : H
return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + ss
},
find() {
console.log(this.startTime.getTime())
},
},
// 頁面載入完畢後觸發的事件
mounted() {
var vm = this
vm.startTime =
new Date().getFullYear() +
"-" +
new Date().getMonth() +
1 +
"-" +
new Date().getDate() +
" " +
new Date().getHours() +
":" +
new Date().getMinutes() +
":" +
new Date().getSeconds()
vm.endTime = vm.convertToLateDate()
},
}
</script>
