前端vue起始日期和终止日期的写法，日期的前端校验

╰+攻爆jí腚メ 2024-03-30 10:47 78阅读 0赞

前端展示的代码

<div style="width:100%;margin:0 auto">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="起始日期:" prop="starttime" label-width="150px" @keyup.enter.native="handleQuery">
                  <el-date-picker v-model="queryParams.starttime" value-format="yyyy/MM/dd" type="date" placeholder=""
                    style="width:200px" @change="selMonth" :editable="false">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终止日期:" prop="endtime" label-width="150px" @keyup.enter.native="handleQuery">
                  <el-tooltip :disabled="!!queryParams.starttime" content="请先选择起始日期" placement="left">
                    <el-date-picker v-model="queryParams.endtime" type="date" value-format="yyyy/MM/dd" placeholder=""
                      :disabled="!queryParams.starttime" style="width:200px" @change="selMonth" :editable="false">
                    </el-date-picker>
                  </el-tooltip>
                </el-form-item>
              </el-col>
    <el-form-item style="width:100%;text-align:center">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

校验起始日期小于终止日期

selMonth() {
          const time1 = new Date(this.queryParams.starttime).getTime()
          const time2 = new Date(this.queryParams.endtime).getTime()
          console.log(time1, time2, "时间")
          if (time1 > time2) {
            this.$set(this.queryParams, "endtime", "")
            return this.$message.error('终止日期不能小于起始日期')
          }
        },

参数

// 查询参数
          queryParams: {
          
            starttime: "",
            endtime: "",
            pageNum: 1,
            pageSize: 10,
            
    }