elementUI日期类型选择器及部分日期转换

Humor_L

已于 2023-11-21 10:14:33 修改

阅读量571

点赞数 1

文章标签： elementui vue.js 前端

于 2023-11-01 13:39:55 首次发布

本文链接：https://blog.csdn.net/Humor_L/article/details/134159401

版权

1、日期选择器不能跨年选择：

<el-date-picker v-model='timerange' :picker-options='rangeoption' type='daterange'
                                  placement='bottom-end'
                                  size='small'
                                  :clearable="false"
                                  style='width: 260px;' range-separator='至'                 
                                  placeholder='请选择日期范围'
                                  start-placeholder='开始日期'
                                  end-placeholder='结束日期'
                                  @change='changeBytime'>
                  </el-date-picker>


定义时：

choiceDate: '',
rangeoption: {
          onPick: ({
                     maxDate,
                     minDate
                   }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => {
            const self = this
            if (self.choiceDate) {
              const selectDate = new Date(self.choiceDate)
              const nowYear = selectDate.getFullYear() // 当前年
              // 本年的开始时间
              const yearStartDate = new Date(nowYear, 0, 1).getTime()
              // 本年的结束时间
              const yearEndDate = new Date(nowYear, 12, 0).getTime()
              return (
                time.getTime() < yearStartDate || time.getTime() > yearEndDate
              )
            }
          }
        },

2、默认显示当前月第一天到今天

created() {
      let me=this;
      let mydate = new Date();
      me.searchParams.search.endtime = me.getTodaydate(mydate);
      let lw = new Date(mydate - 1000 * 60 * 60 * 24 * 30);
      me.searchParams.search.starttime = me.getTodaydate(lw);
      me.$set(me.searchParams, 'timerange', [me.searchParams.search.starttime ,  me.searchParams.search.endtime])
    },


getTodaydate (val) {
        let endY = val.getFullYear();
        let endM = val.getMonth() + 1;
        let endD = val.getDate();
        let enddate = endY + '-' + (endM < 10 ? '0' + endM : endM) + '-' + (endD < 10 ? '0' + endD : endD)
        return enddate
      },


<el-date-picker v-model="searchParams.timerange" :picker-options="rangeoption" type="daterange" placement="bottom-end"
                              style="width: 260px;"
                              clearable unlink-panels
                              range-separator="至"  placeholder="请选择日期范围" 
                              size='small'
                              >
              </el-date-picker>

定义时：

rangeoption:{
          //不能选择今天之后的日期
          disabledDate (date) {
            return date && date.valueOf() > Date.now() ;
          }
        },

3、年第一天到当前日期

 <el-date-picker v-model='timerange' :picker-options='rangeoption' type='daterange'
                                  placement='bottom-end'
                                  size='small'
                                  :clearable="false"
                                  style='width: 260px;' range-separator='至' placeholder='请选择日期范围'
                                  start-placeholder='开始日期'
                                  end-placeholder='结束日期'
                                  @change='changeBytime'>
                  </el-date-picker>
定义：    timerange:[],
rangeoption: {
          shortcuts: [
            {
              text: '近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '近两周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 13)
                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])
              }
            }
          ],
          onPick: ({
                     maxDate,
                     minDate
                   }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => {
            const self = this
            if (self.choiceDate) {
              const selectDate = new Date(self.choiceDate)
              const nowYear = selectDate.getFullYear() // 当前年
              // 本年的开始时间
              const yearStartDate = new Date(nowYear, 0, 1).getTime()
              // 本年的结束时间
              const yearEndDate = new Date(nowYear, 12, 0).getTime()
              return (
                time.getTime() < yearStartDate || time.getTime() > yearEndDate
              )
            }
          }
        },

changeBytime (val) {
        let me = this
        me.timerange = val
        if (me.timerange !== null) {
          me.searchParams.search.begindate = utils.formatDate(me.timerange[0], 'yyyy-MM-dd')
          me.searchParams.search.enddate = utils.formatDate(me.timerange[1], 'yyyy-MM-dd')
        } else {
          me.searchParams.search.begindate = ''
          me.searchParams.search.enddate = ''
        }
      },

created(){
      const today = new Date();
      const year = today.getFullYear();
      this.timerange = [
        `${year}-01-01`,
        `${year}-${today.getMonth() + 1}-${today.getDate()}`
      ];
    }