1.ElementUI日期样式

2.定义数据以及方法

这里面的signDate可以赋值为空字符”或者赋值为空数组[],这里面包含两个值,一个值为开始日期,另一个值为结束日期

export default {data() {return {queryParams: {signDate: ''}, pickerOptions: {shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)picker.$emit('pick', [start, end])}}, {text: '最近一个月',onClick(picker) {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)picker.$emit('pick', [start, end])}}, {text: '最近三个月',onClick(picker) {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)picker.$emit('pick', [start, end])}}]}}},created() {// 初始化默认时间this.defaultDate()},methods: {// 初始化默认时间defaultDate() {var date = new Date()var year = date.getFullYear().toString()var month = date.getMonth() + 1 注意:日期选择器清除完后这边有坑,选择完日期格式清除后重新加载,他会给绑定的signDate赋值为null,重新加载页面会报错,所以要设置上面的监听器,如果值为null时赋值为空字符串'',不然会报下面的错,设置了监听器可以正常运行

第二种方式:将开始日期和结束日期分为两个时间选择器

定义绑定的参数及方法

export default {data() {return {queryParams: {startTime: '',endTime: '',},// 开始时间不能大于结束时间pickerOptionsStart: {disabledDate: (time) => {if (this.queryParams.endTime) {return (time.getTime() >= new Date(this.queryParams.endTime).getTime())}}},// 结束时间不能小于开始时间pickerOptionsEnd: {disabledDate: (time) => {if (this.queryParams.startTime) {return (time.getTime() <= new Date(this.queryParams.startTime).getTime())}}}}},created() {/** 重置按钮操作 */resetForm() {this.$refs['formName'].resetFields()this.queryParams.startTime = ''this.queryParams.endTime = ''}, // 初始化默认时间defaultDate() {var date = new Date()var year = date.getFullYear().toString()var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()// var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()var da = new Date(date.getFullYear(), month, 0).getDate()da < 10 ? '0' + da.toString() : da.toString()var beg = year + '-' + month + '-01'var end = year + '-' + month + '-' + dathis.queryParams.startTime = beg //将值设置给插件绑定的数据this.queryParams.endTime = end}},watch: {// 监听日期清理后数据为null进行处理否则会报错'queryParams.startTime'(newVal) {if (newVal == null) {this.queryParams.startTime = ''}},'queryParams.endTime'(newVal) {if (newVal == null) {this.queryParams.endTime = ''}}}}