使用element ui datapicker 选择日期范围并设置默认选择一年时间

本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/97765590

这篇博客介绍了如何在Vue项目中使用Element UI的DatePicker组件选择日期范围，并设置默认显示为一年的时间。通过设置unlink-panels属性可以解除日期面板的联动，并通过format和value-format属性定制日期格式。在data和methods中定义初始值和设置方法，再在mounted钩子中调用，即可实现组件加载时显示默认的一年时间。

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

在template中

    <el-date-picker
                        v-model="timeData"
                        type="daterange"
                        size="mini"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        class="data-pick"
                        unlink-panels
                      ></el-date-picker>

在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

日期格式
使用format指定输入框的格式；使用value-format指定绑定值的格式。默认情况下，组件接受并返回Date对象。如需修改日期格式，可参考官网配置项https://element.eleme.io/#/zh-CN/component/date-picker

在data里面

    data () {
    return {
    timeData:[]
    }

在methods里面设置默认一年时间

    methods: {
       /* 获取过去时间，并传值给现在时间 */
        getPassYearFormatDate () {
          var nowDate = new Date()
          var date = new Date(nowDate)
          date.setDate(date.getDate() - 365)
          var seperator1 = '-'
          var year = date.getFullYear()
          var month = date.getMonth() + 1
          var strDate = date.getDate()
          if (month >= 1 && month <= 9) {
            month = '0' + month
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = '0' + strDate
          }
          var formatDate = year + seperator1 + month + seperator1 + strDate
          this.getNowFormatDate(formatDate)
        },
        /* 获取现在时间，并接受过去时间的值 */
        getNowFormatDate (formatDate) {
          var date = new Date()
          var seperator1 = '-'
          var year = date.getFullYear()
          var month = date.getMonth() + 1
          var strDate = date.getDate()
          if (month >= 1 && month <= 9) {
            month = '0' + month
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = '0' + strDate
          }
          var nowData = year + seperator1 + month + seperator1 + strDate
          this.timeData= [formatDate, nowData]  // 默认赋值一年时间
    }
    }

别忘了在mounted里面调用一下

mounted(){
this.getPassYearFormatDate ()
}

然后在你需要的地方传值就可以了，例如：

      beginDate: this.timeData[0],        //起始时间
      endDate: this.timeData[1],          //终止时间

效果如下，一开始就有默认一年的时间：
在这里插入图片描述