需求如下:

  • 默认值
  • 只能在最近三个月筛选
  • 快捷选项
<el-date-picker
    type="daterange"
    v-model="timeRange"
    @change="changeTimeRange"
    value-format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="开始日期"
    :picker-options="pickerOptions"
    end-placeholder="结束日期">
</el-date-picker>
import {formatDate} from '@/utils/date' //formDate最下面
...
data(){
    var date = new Date();
    var time = new Date().getTime() - 3600 * 1000 * 24 * 30;
    date.setTime(time);
    return {
    // 默认值
    timeRange:[formatDate(date,'yyyy-MM-dd') ,formatDate(new Date(),'yyyy-MM-dd')],
    pickerOptions:{
        //只能选择最近三个月的
        disabledDate(time) {
          const start = new Date();
          return time.getTime() > Date.now() || (time.getTime() <= start.getTime() - 3600 * 1000 * 24 * 90 - 1000*60*60*24 );
        },
        // 快捷选项
        shortcuts: [{
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              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]);
            }
          }
        ]
      },
    }
},
methods: {
    changeTimeRange(value){
    this.$fetchData3({
      startTime: this.timeRange[0],
      endTime: this.timeRange[1]
    });

}

formatDate 工具函数

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
}
最后修改:2021 年 01 月 17 日 03 : 06 PM
如果觉得我的文章对你有用,请随意赞赏