Element-UI 日期选择器 选择时间范围在一个月内

本文介绍将elementui的el-date-picker再次封装并设置选择范围在一个月内
封装的组件date-picker.vue

<template>
  <el-date-picker
    placeholder="请选择统计日期"
    unlink-panels
    :value="value"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']"
    :picker-options="pickerOptions"
    @input="change($event)"
  />
</template>

<script>
export default {
  name: 'DatePicker', //时间选择器，只可以选择1个月以内的
  props: {
    value: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      selectDate: '',
      //日期选择范围在一个月内
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    }
  }
}
</script>

调用组件

<template>
  <DatePicker v-model="time_space" />
</template>

<script>
import DatePicker from '@/components/date-picker'
export default {
  name: 'Statistics', //商户统计
  components: { DatePicker },
  data() {
    return {
      //给一个初始化的时间：当天的0点到现在
      time_space: [`${new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]} 00:00:00`, new Date().format('yyyy-MM-dd hh:mm:ss')]
    }
  }
}
</script>

本文用到了一个自己给date封装的方法,该方法可以将new Date()的时间转换为指定格式，具体如下:
utils.js（该js文件已经在main.js中全局引入）

// format函数为扩展函数。
/**
 *对Date的扩展，将 Date 转化为指定格式的String
 *月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 *年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 *例子：
 *(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 *(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
 */
Date.prototype.format = function (fmt) {
    var o = {
        'M+': this.getMonth() + 1, //月份
        'd+': this.getDate(), //日
        'h+': this.getHours(), //小时
        'm+': this.getMinutes(), //分
        's+': this.getSeconds(), //秒
        'q+': Math.floor((this.getMonth() + 3) / 3), //季度
        S: this.getMilliseconds() //毫秒
    }
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    for (var k in o)
        if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
    return fmt
}