Element的时间选择器DatePicker在form中默认当天时间

深藏阁楼爱情的钟 2022-08-31 05:55 596阅读 0赞

HTML：

<el-form-item label="生产日期">
            <el-date-picker
              v-model="queryDateRange"
              size="mini"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeDatePicker"
            ></el-date-picker>
          </el-form-item>

JS：

data(){
          pickerOptions: {
            shortcuts: [
              {
                text: "最近一周",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近一个月",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit("pick", [start, end]);
                },
              },
              {
                text: "最近三个月",
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit("pick", [start, end]);
                },
              },
            ],
          },
          queryParams: {},
          queryDateRange: [new Date(new Date().toLocaleDateString()), new Date()],
    
      },
      created() {
        // 当天00:00:00 时间
        this.queryParams.planStartTime = formatDate(
          new Date(new Date().toLocaleDateString())
        );
        // 使用的当前时间
        this.queryParams.planEndTime = formatDate(new Date());
      },
      methods:{
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getOrderList();
        },
        // 改变时对queryParams赋值，使用 2021-7-22 08:00:00类型
        changeDatePicker() {
          this.queryDateRange
            ? (this.queryParams.planStartTime = formatDate(this.queryDateRange[0]))
            : (this.queryParams.planStartTime = undefined);
          this.queryDateRange
            ? (this.queryParams.planEndTime = formatDate(this.queryDateRange[1]))
            : (this.queryParams.planEndTime = undefined);
        },
        /** 重置按钮操作 */
        resetQuery() {
          重置时使queryParams参数 和queryDateRange  都为当前时间
          this.queryDateRange = [
            new Date(new Date().toLocaleDateString()),
            new Date(),
          ];
    
          this.queryParams.planStartTime = formatDate(
            new Date(new Date().toLocaleDateString())
          );
          this.queryParams.planEndTime = formatDate(new Date());
          this.resetForm("queryForm");
          this.handleQuery();
        },
      }