Vue + el-date-picker日期时间控件实现今天昨天上周上一个月等功能

Posted 2021-09-23 做猪呢，最重要的是开森啦

 有时我们需要搜索对应时间段的内容，我们就可以用el-date-picker这个日期时间控件来实现

0. 整体代码：

【效果】：

【栗子代码】：

<template>
  <div>
    <el-col :span="10">
      <el-row align="middle">
        <el-col :span="4" ><label>时间范围：</label></el-col>
        <el-col :span="20">
          <el-date-picker v-model="dateSpan" type="datetimerange" :picker-options="pickerOptions"
                          :unlink-panels="true" range-separator="至" start-placeholder="开始时间"
                          size="mini" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss">

          </el-date-picker>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="10">
      <el-button @click="getSearch" size="min" >查询</el-button>
    </el-col>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "SideOne",
  methods: {
    getSearch () {
      const startTime = this.dateSpan.length !==0 ?this.dateSpan[0] : ''
      const endTime = this.dateSpan.length !==0 ?this.dateSpan[1] : ''
      console.log('startTime: ' + startTime)
      console.log('endTime: ' + endTime)
    }
  },
  data: function () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            const startTime = moment(moment().startOf('day').valueOf())
            const endTime = moment(moment().endOf('day').valueOf())
            start.setTime(startTime)
            end.setTime(endTime)
            picker.$emit('pick',[start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick',[start, end])
          }
        }]
      },
      dateSpan: ''
    }
  }
}
</script>
</style>

1. 要点讲解：

 绑定:picker-options=“pickerOptions”，在pickerOptions中定义快捷时间段

 【今天】：

 需要引入moment组件，import moment from ‘moment’


const startTime = moment(moment().startOf('day').valueOf())
const endTime = moment(moment().endOf('day').valueOf())

 【昨天】：

const startTime = moment(moment().subtract(1,'day').startOf('day').valueOf())
const endTime = moment(moment().subtract(1,'day').endOf('day').valueOf())

 【近七天】：

 const startTime = moment(moment().subtract(6,'day').startOf('day').valueOf())
 const endTime = moment(moment().endOf('day').valueOf())

 【上个月】：

const startTime = moment(moment().subtract(1,'month').startOf('month').valueOf())
const endTime = moment(moment().subtract(1,'month').endOf('month').valueOf())

 上述的时间段是以0点-24点为基准的，下列这些方式，是以当前时间来计算的时间段

 【最近一周】：

start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)

 【最近一个月】：

start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)

 【最近三个月】：

start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 3)

 选取的时间段可以通过dateSpan来获取，如栗子代码中：

    getSearch () {
      const startTime = this.dateSpan.length !==0 ?this.dateSpan[0] : ''
      const endTime = this.dateSpan.length !==0 ?this.dateSpan[1] : ''
      console.log('startTime: ' + startTime)
      console.log('endTime: ' + endTime)
    },