<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
<body>
<div id="app">
<el-date-picker
v-model="time"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
<el-button @click='changeTime(1)'>
上一周的日期
</el-button>
<el-button @click='changeTime(2)'>
上一月的日期
</el-button>
<el-button @click='changeTime(3)'>
上一年的日期
</el-button>
<el-button @click='changeTime(0)'>
打印日期
</el-button>
</div>
<script>
new Vue({
el:"#app",
data:{
time:""
},
methods:{
changeTime(type){
switch(type){
case 1:{
//上一周
let date = new Date()
date.setTime(date.getTime() - (1000 * 60 * 60 * 24 * 7)) //当前时间的毫秒数减去一周的毫秒数为上一周的日期
date.setHours(0,0,0)//时分秒改为零点零时零秒
this.time = date
};break
case 2:{
//上一月
let date = new Date()
//date.setTime(date.getTime() - (1000 * 60 * 60 * 24 * 30)) //当前时间的毫秒数减去一月的毫秒数为上一月的日期
//某些月份不知道是多少天，可以用减去月份方式代替毫秒数
date.setMonth(date.getMonth() - 1)
date.setHours(0,0,0)//时分秒改为零点零时零秒
this.time = date
};break
case 3:{
//上一年
let date = new Date()
date.setTime(date.getTime() - (1000 * 60 * 60 * 24 * 365)) //当前时间的毫秒数减去一年的毫秒数为上一年的日期
date.setHours(0,0,0)//时分秒改为零点零时零秒
this.time = date
};break
case 0:{
console.log(this.time)
}
}
}
}
})
</script>
</body>
</html>
修改el-date-pick双向绑定的值的时候，要赋值一个date类型，可通过Ｄate对象的相关API修改date日期。