本文介紹將elementui的el-date-picker再次封裝并設(shè)置選擇范圍在一個(gè)月內(nèi)
封裝的組件date-picker.vue

<template>
  <el-date-picker
    placeholder="請選擇統(tǒng)計(jì)日期"
    unlink-panels
    :value="value"
    type="daterange"
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結(jié)束日期"
    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', //時(shí)間選擇器撤蟆，只可以選擇1個(gè)月以內(nèi)的
  props: {
    value: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      selectDate: '',
      //日期選擇范圍在一個(gè)月內(nèi)
      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>

調(diào)用組件

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

<script>
import DatePicker from '@/components/date-picker'
export default {
  name: 'Statistics', //商戶統(tǒng)計(jì)
  components: { DatePicker },
  data() {
    return {
      //給一個(gè)初始化的時(shí)間：當(dāng)天的0點(diǎn)到現(xiàn)在
      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>

本文用到了一個(gè)自己給date封裝的方法,該方法可以將new Date()的時(shí)間轉(zhuǎn)換為指定格式迷郑，具體如下:
utils.js（該js文件已經(jīng)在main.js中全局引入）

// format函數(shù)為擴(kuò)展函數(shù)吓妆。
/**
 *對Date的擴(kuò)展，將 Date 轉(zhuǎn)化為指定格式的String
 *月(M)、日(d)瘩蚪、小時(shí)(h)躲株、分(m)、秒(s)涤姊、季度(q) 可以用 1-2 個(gè)占位符暇番，
 *年(y)可以用 1-4 個(gè)占位符，毫秒(S)只能用 1 個(gè)占位符(是 1-3 位的數(shù)字)
 *例子：
 *(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(), //小時(shí)
        '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
}