行业知识
el-date-picker设置日期默认值(当月月初至月末)
2026-11-14 06:34:34
来源:互联网转载
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()
上一篇:解决网络延迟高的实用技巧!
下一篇:创游世界怎么打开服务器?