element UI 时间选择器，显示默认时间为当前时间至7天之前时间（并格式化日期-年月日，时分秒）

小半 • 2023年1月18日下午6:18 • 前端开发 • 阅读 279

1.template中使用：

        <el-form-item>
            <date-range-picker
              v-model="deviceFormData.time"
              class="date-item"
              :start-placeholder="$t('NeoLight.startTime')"
              :end-placeholder="$t('NeoLight.endTime')"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            />
          </el-form-item>

2.data中定义：

  data() {
    return {
      deviceFormData: {
        time: [],
      },
         //不能选择当前日期之后的时间
    pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
  }
    };
  },

3.methods方法：

   created() {
    this.getTimeFn();
  },
 
    // 设置默认时间
    getTimeFn() {
      const that = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.deviceFormData.time[0] = that.formatDate(start);
      this.deviceFormData.time[1] = that.formatDate(end);
    },
    
    // 格式化时间
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },

4.实现效果：

小tips 时分秒格式化时间

/**
     * 格式化时间 到 时 分 秒
     */
formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();
      var h = date.getHours();
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }

      h = h < 10 ? "0" + h : h;
      var m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;

      return (
        myyear + "-" + mymonth + "-" + myweekday + " " + h + ":" + m + ":" + s
      );
    },