el-date-picker获取日期范围的日期_el-date-picker daterange 取值-CSDN博客

本文链接：https://blog.csdn.net/mischievous_boy/article/details/111026277

本文介绍如何使用el-date-picker组件选择日期范围，并通过JavaScript获取该范围内的每一天。通过计算两个日期之间的天数差，再利用毫秒数转换为日期格式，最终形成连续日期数组。

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

今天遇到的一个需求

使用el-date-picker选择日期范围，然后在这个范围中，要拿到这个范围中的所有天数，以12月5号，12月6号，12月7号类似的连续展示。

因为选择的天数可能是跨月，所以每个月有不同的天数，又有闰年啥的，这种比较复杂，不直接考虑。

接下来用的方法主要是使用new date（value）这种方法。

首先使用el-date-picker绑定的元素是一个数组，这个数组中存放的是两个标准时间（是选中的日期范围）

<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>

然后需要操作的步骤

获取这两个时间相差的天数
获取到开始时间的毫秒数
在上一个毫秒数的基础上+3600*24就获取到了下一天的毫秒数

到这如果想直接将毫秒数转化为2012/12/12的形式，就能使用split方法将他们转化为一个数组，然后存入到一个数组中，最后的数组以[ ['2012' , '12' , '12'] ] , ['2012' , '12' , '13'] ]的形式就完成任务了

<template>
  <div class="container">
    <el-button @click=" clickAction">click</el-button>
    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: "Container",
  data () {
    return {
      value1: [],
    }
  },
  methods: {
    clickAction () {
      console.log(this.value1);
      this.getDays()
    },
    // 两个日期的天数
    getDays () {
      let arr = []
      // 计算中间有多少个日期
      let result = parseInt(Math.abs(this.value1[1] - this.value1[0]) / 1000 / 60 / 60 / 24)
      //获取第一个日期的毫秒数
      let firstTime = new Date(this.value1[0]).getTime()
      for (let i = 0; i < result; i++) {
        // 将毫秒数转化为2020/11/11 
        arr.push(new Date(firstTime).toLocaleDateString())
        firstTime += 3600 * 1000 * 24;
      }
      let container = arr.map(item => {
        return item.split('/');
      })
      console.log(result);
      console.log(container);

    }
  }
}
</script>
<style scoped>
.container {
  padding: 30px;
}
</style>