element + vue封装时间查询组件(开始/结束 时间戳)

先上代码,直接写在vue组件里封装, 然后全局注册或者单独引入就可以

<template>
  <div class="block">

    <!--<span class="titleStyle">时间选择</span>-->
    <el-date-picker
        size="mini"
        v-model="value"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="timestamp"
    >

    </el-date-picker>
  </div>
</template>
<script>
export default {
  props: ['shijian'],
  name: 'TimeQueryTool',
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近24小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().toLocaleDateString())
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end =
                  new Date(new Date().toLocaleDateString()).getTime() - 1
              const start =
                  new Date(new Date().toLocaleDateString()).getTime() -
                  24 * 60 * 60 * 1000
              picker.$emit('pick', [start, end])
            }
          },

          {
            text: '最近七天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start.getTime(), end.getTime()])
            }
          }
        ]
      },

      value: []
    }
  },
  watch: {
    value() {
      if (this.value == null) {
        this.value = []
      }
      this.$emit('shijian', this.value)
    }
  }
}
</script>
<style scoped>
.titleStyle {
  font-weight: 700;
  color: #606266;
  font-size: 14px;
  margin-right: 10px;
}
</style>

使用起来非常简单, 一个标签加一个方法

<TimeQueryTool @shijian="queryTime"></TimeQueryTool>

queryTime(val) {
      console.log('获取的两个段的时间戳',val)
    }

获取到时间戳后自己组装一下就可以

附带一个时间戳转时间的封装方法

// 日期格式化
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }

超期时间计算 

已超期{{Math.ceil((Date.parse(new Date()) - Date.parse(newDate(时间))) / (1000 * 3600 * 24))}}天