DatePicker中选择日期范围（daterange）的日期做为搜索条件时，前端和后端处理的两种不同方式

一、前端将开始日期和结束日期作为两个字段时的处理

注意：选择了开始日期，后面选择结束日期时，开始日期前的日期全部禁用。

代码如下：

<el-row>
          <el-col :span="12">
            <el-form-item label="开始时间:" prop="farmingBeginDate">
                <el-date-picker
                    v-model="form.farmingBeginDate"
                    type="date"
                    placeholder="请点击输入"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间:" prop="farmingEndDate">
                <el-date-picker
                    v-model="form.farmingEndDate"
                    type="date"
                    placeholder="请点击输入"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabledDate="disabledDate"
                    style="width: 100%"
                />
            </el-form-item>
          </el-col>
        </el-row>

disableDate方法如下：

methods: {
    disabledDate(time) {
      let formatStr = '{y}-{m}-{d}' // 年月日格式
      let startDate = this.form.farmingBeginDate
      var startDate1 = new Date(startDate);
      return parseTime(time,formatStr) < parseTime(startDate1,formatStr)
    },
}

parseTime方法如下：

export function parseTime(time, cFormat) {
    if (arguments.length === 0) {
        return null
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if (('' + time).length === 10) time = parseInt(time) * 1000
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

二、前端用一个字段并将日期分为开始时间和结束时间

1、前端代码

<el-form-item label="实际入库时间区间：">
        <el-date-picker
                v-model="listQuery.inStoreDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"/>
      </el-form-item>

查询按钮

<el-button class="el-button el-button--primary el-button--small" type="primary" icon="el-icon-search" @click="getList" >查询</el-button>

getList方法：

getList() {
      this.listLoading = true
      this.listQuery.startTime = this.listQuery.inStoreDate == null ? null : this.listQuery.inStoreDate[0]
      this.listQuery.endTime = this.listQuery.inStoreDate == null ? null : this.listQuery.inStoreDate[1]
      console.log(this.listQuery)
      inStore.getList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      })
    },

js:

getList(query) {
    return request({
      url: '/inStore/list',
      method: 'post',
      params: query
    })
  },

2、后台代码

controller

@PostMapping("/list")
    public Result getList(
            @RequestParam(name = "entityId", required = false) String entityId,
            @RequestParam(name = "deliveryEntName", required = false) String deliveryEntName,
            @RequestParam(name = "inStoreNoteNo", required = false) String inStoreNoteNo,
            @RequestParam(name = "startTime", required = false) String startTime,
            @RequestParam(name = "endTime", required = false) String endTime,
            @RequestParam(name = "inStoreType", required = false) String inStoreType,
            @RequestParam(name = "page", defaultValue = "1") int pageIndex,
            @RequestParam(name = "limit", defaultValue = "10") int length
    ) {
        return inStoreService.getList(entityId, deliveryEntName, inStoreNoteNo,startTime, endTime, inStoreType, pageIndex, length);
    }

service

@Override
    public Result getList(String entityId, String deliveryEntName, String inStoreNoteNo, String startTime, String endTime, String inStoreType,
                          int pageIndex, int length) {
        Map map = new HashMap();
        map.put("entityId", entityId);
        map.put("deliveryEntName", deliveryEntName);
        map.put("inStoreNoteNo", inStoreNoteNo);
        map.put("startTime", startTime);
        map.put("endTime", endTime);
        map.put("inStoreType", inStoreType);
        PageHelper.startPage(pageIndex, length);
        List<Map> inStoreList = inStoreDao.selectList(map);
        PageInfo pageInfo = new PageInfo(inStoreList);
        return Result.operating("入库信息", true, ResultCode.SUCCESS, pageInfo.getList(), (int) pageInfo.getTotal(), pageInfo.getPages());
    }

dao

<select id="selectList" resultMap="inStore">
        select *
        from b_in t1
        <where>
            <if test="entityId!=null and entityId!=''">
                AND t1.entity_id =#{entityId}
            </if>
            <if test="deliveryEntName!=null and deliveryEntName!=''">
                AND t1.from_name like concat('%',#{deliveryEntName},'%')
            </if>
            <if test="inStoreNoteNo!=null and inStoreNoteNo!=''">
                AND t1.in_no like concat('%',#{inStoreNoteNo},'%')
            </if>
            <if test="startTime!=null and startTime!='' and endTime!=null and endTime !=''">
                AND t1.in_date BETWEEN  #{startTime} AND #{endTime}
            </if>
            <if test="inStoreType!=null and inStoreType!=''">
                AND t1.in_type = #{inStoreType}
            </if>
        </where>
        ORDER BY t1.create_time desc, t1.id desc
    </select>

三、前端用一个字段再在后台分为开始时间和结束时间

1、前端代码

<el-form-item label="生产日期：">
        <el-date-picker
            v-model="listQuery.produceDate"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            clearable
        />
      </el-form-item>

getList方法

getList() {
      this.listLoading = true;
      productRelation.getList(this.listQuery).then(res => {
        if (res.success) {
          this.list = res.data;
          this.total = res.total;
        }
      }).catch(err => {
        console.log(err);
      }).finally(() => {
        this.listLoading = false;
      })
    },

2、后台代码

controller

@PostMapping("/getList")public Result getList(@RequestBody JSONObject jsonQuery) {
        return productRelationService.getList(jsonQuery);
    }

service实现类中通过JSONObject的getList方法得到数组，再得到开始时间和结束时间。

// 获取到前台传递的生产日期查询区间
        List<String> produceDate = jsonQuery.getList("produceDate", String.class);
        if (CollectionUtil.isNotEmpty(produceDate)) {
            jsonQuery.put("beginDate", produceDate.get(0));
            jsonQuery.put("endDate", produceDate.get(1));
        }