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

最新推荐文章于 2025-04-01 16:30:35 发布

做猪呢，最重要的是开森啦

最新推荐文章于 2025-04-01 16:30:35 发布

阅读量3.8k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript datepicker picker 今天

本文链接：https://blog.csdn.net/weixin_43901882/article/details/120144764

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element UI的el-date-picker组件创建日期时间范围选择器，并通过moment.js实现预设的快捷时间段，如今天、昨天、近一周等。同时展示了如何获取用户选择的时间范围并进行后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时我们需要搜索对应时间段的内容，我们就可以用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)
    },