vue el-date-picker 时间选择器选择日期范围

el-date-picker选择日期范围

这是element官网上的基础时间选择器选择时间范围

html 复制代码

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
      };
    }
  };
</script>

显示效果如下图

属性	意义
v-model	上面v-model="value1"意味着当前时间选择器组件和value1的值双向绑定，value1变化，这里面的值也会变化
type	显示类型，默认显示date，这边要选择时间范围，使用daterange
range-separator	选择范围时的分隔符，上面选择"至"做分隔符，可能有至会消失一半的问题，这是样式问题，可以点击element-ui中的el-date-picker 页面至字显示不全的原因及解决查看解决方案
start-placeholder	范围选择时开始日期的占位内容
end-placeholder	范围选择时结束日期的占位内容

在查询中添加时间选择器的查询

html 复制代码

<template>
  <div>
    <el-form>
      <el-form-item>
        <el-date-picker
          @change="gettime"
          v-model="rangeDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rangeDate: "",
      start: "",
      end: "",
    };
  },
  methods:{
    gettime(rangeDate) {
      //定义开始结束时间
      if (rangeDate != null) {
        this.start = rangeDate[0];
        this.end = rangeDate[1];
      }else{
        this.start ='';
        this.end ='';
      }
    },
  }
}
</script>

@change：监听表单元素值变化的事件处理器

@change="gettime"这里意味着监听gettime方法的触发
在methods内写gettime要传入双向绑定的rangeDate，rangeDate改变了数据也会变，当我们先选择了开始和结束时间，但是又清空的时候会报一个读取对象属性为null的错误，这说明rangeDate为null了，所以我们要在方法内定义开始和结束时间之前先判断rangeDate不为空，不为空才可定义开始和结束时间是rangeDate的第一和二值，否则就变为空字符串，也就是全局变量的初始状态

value-format="yyyy-MM-dd"是自定义的一个显示格式，可有可无

前端这个时候就写好了，由于改变了查询条件，我们需要在后端的查询方法内修改高级查询QueryWrapper的查询条件

时间选择分两种，选择了和没选择，由于这个组件一定有开始和结束时间，条件也随之生成，在开始和结束时间都不为空且不为null的情况下才会加上对应的查询条件，数据库内的生日字段必须在开始和结束时间中间才会被查询出来，否则不加新的查询条件，start和end都是前端传过来的

java 复制代码

    @Override
    /*返回PageUtils工具类对象*/
    public PageUtils queryPage(Map<String, Object> params) {
        String username = (String) params.get("username");
        String sex = (String) params.get("sex");
        String start=(String) params.get("start");
        String end=(String) params.get("end");

        QueryWrapper<User> qw = new QueryWrapper<>();
        /*like-模糊查询*/
        qw.like(StringUtils.isNotBlank(username),"username",username)
                .eq(StringUtils.isNotBlank(sex),"sex",sex);
        if (StringUtils.isNotBlank(start) && StringUtils.isNotBlank(end)) {
            qw.between("birthday",start,end);
        }
        /*分页查询*/
        IPage<User> page=this.page(new Query<User>().getPage(params),qw);

        return new PageUtils(page);
    }

此时重新运行，在前端就能看到时间选择筛选出的结果