小工具知识网

当前位置: 首页 > 行业知识 > el-date-picker设置日期默认值(当月月初至月末)

行业知识

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() 

上一篇:解决网络延迟高的实用技巧!

下一篇:创游世界怎么打开服务器?