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))}}天

==以下是补充vue3的时间选择组件，组件使用更加丝滑

<template>
  <!--
    <MyTimeQuery v-model:startTime="queryData.startTime" v-model:endTime="queryData.endTime"></MyTimeQuery>
  -->
  <el-date-picker
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="x"
      v-bind='$attrs'
  />
</template>

<script setup>
import {ref, watch} from "vue";
/* props */
const props = defineProps(['startTime','endTime'])
/* emit */
const emit = defineEmits(['update:startTime', 'update:endTime'])
const value2 = ref(['',''])
watch(value2, (n, o) => {
    if(!n){
        value2.value = ['', '']
    }
  emit('update:startTime', value2.value[0])
  emit('update:endTime', value2.value[1])
})
watch(() => [props.startTime, props.endTime], (n, o) => {
  value2.value = n
})

const shortcuts = [
  {
    text: '今天',
    value: () => {
      const end = new Date().getTime()
      const start = new Date(new Date().toLocaleDateString()).getTime()
      return [start, end]
    }
  },
  {
    text: '昨天',
    value: () => {
      const end =
          new Date(new Date().toLocaleDateString()).getTime() - 1
      const start =
          new Date(new Date().toLocaleDateString()).getTime() -
          24 * 60 * 60 * 1000
      return [start, end]
    }
  },
  {
    text: '最近3天',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
      return [start, end]
    }
  },
  {
    text: '最近7天',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近15天',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
      return [start, end]
    }
  },
  {
    text: '最近30天',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近90天',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
  {
    text: '最近6个月',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    }
  },
  {
    text: '最近1年',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().toLocaleDateString())
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
      return [start, end]
    }
  },
  {
    text: '今年至今',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    }
  }
]
</script>
<style scoped>

</style>