当前位置: 首页 > 工具软件 > UI-date > 使用案例 >

element-ui设置日期默认值

薛晨
2023-12-01

需求:设置开始日期为前30天,结束日期是当前日期

     <el-form-item label="时间" prop="dateRange">
        <el-date-picker
          v-model="queryParams.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          :picker-options="pickerBeginDateBefore"
          end-placeholder="结束日期"
          size="small"
          class="margin-right-10"
        >
        </el-date-picker>
      </el-form-item>
created() {
    this.getProjects();
    // 设置开始日期为前30天,结束日期是当前日期,注意使用$set来设置!
    let startDate = this.getThreeDaysAgo();
    let endDate = this.getToday();
    this.$set(this.queryParams, "dateRange", [startDate, endDate]);
  },
// 获取当前日期
    getToday() {
      //获取当前日期
      let myDate = new Date();
      let nowY = myDate.getFullYear();
      let nowM = myDate.getMonth() + 1;
      let nowD = myDate.getDate();
      let endDate =
        nowY +
        "-" +
        (nowM < 10 ? "0" + nowM : nowM) +
        "-" +
        (nowD < 10 ? "0" + nowD : nowD); //当前日期
      return endDate;
    },

    // 获取三十天之前的日期
    getThreeDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改,30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return startData;
    },

 类似资料: