el-date-picker设置默认值为当月第一天0时，当天23：59：59

云白冰

已于 2024-12-26 15:58:33 修改

阅读量2.6k

点赞数 3

文章标签： vue.js elementui javascript

于 2024-03-26 10:14:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52115201/article/details/137037619

版权

文章介绍了如何在Vue项目中使用ElementUI的日期时间范围选择器，并展示了如何设置默认的24小时时间范围，包括当天的最新一秒和当月的第一天零时。

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

   <el-date-picker
    v-model="openTime"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
   >
   </el-date-picker>


 data() {
      return {
        openTime: this.get24hoursRangeTime(),
      }
    },
    methods: {
      //当前默认的初始时间
      get24hoursRangeTime() {
        let rangeArr = []; //定义一个装时间的数组
        let d = new Date();
        //设定当天的最后一秒
        let year1, month1, day1;
        year1 = d.getFullYear();
        month1 = d.getMonth() + 1;
        day1 = d.getDate();
        month1 = month1 > 10 ? month1 : '0' + month1; 
        day1 = day1 > 10 ? day1 : '0' + day1;
        let value1 = year1 + '-' + month1 + '-' + day1 + ' ' + '23' + ':' + '59' + ':' + '59';
        rangeArr.push(value1);
        //设定当月第一天的零时
        let y = d.getFullYear().toString();
        let m = (d.getMonth() + 1).toString().padStart(2, 0);

        let da = (['1', new Date(y, m, 0).getDate(), d.getDate()][0]).toString().padStart(2, 0);
        let value2 = y + '-' + m + '-' + da + ' ' +'00'+ ':' + '00' + ':' + '00';
        rangeArr.unshift(value2);
        return rangeArr;
      },

* @param // type 0 第一天; 1 最后一天; 不传当天;(白色框里的值是type)