啥也不会的实习生：给项目添加日期搜索控件

目前已有的前端显示界面，要求在搜索框后面添加一个日期搜索框，可以指定搜索日期

找到前端界面对应代码块如图：

后端已有实体类：

/**
     * 日期
     */
    @JsonFormat(pattern = "yyyy-MM-dd")
    @Excel(name = "日期", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
    private Date date;

根据前端其他代码照葫芦画瓢写出如下代码：

 <el-form-item label="日期" prop="date">
        <el-input
          v-model="queryParams.date"
          placeholder="请输入日期"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

 运行前后端项目，效果实现：

开发科的师傅看了我添加的日期搜索框，说要的不是这种效果，要的是那种只需要鼠标单击的那种日期选择，还要键盘输入太麻烦了。

经过搜索学习进行了前端代码修改后：

<el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="queryParams.date"
          placeholder="请输入日期"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
        </el-date-picker>
      </el-form-item>

现在效果如图：

发现多了小时分钟秒钟对项目无意义，只需要具体到日期就行了，于是想办法把去掉。

尝试下再修改了下前端代码，发现只要把type类型里的datetime改成date就行了。

<el-date-picker
          v-model="queryParams.date"
          placeholder="请输入日期"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
        </el-date-picker>

修改后效果如图所示：

 完成后又去问师傅，师傅说还不行，要那种有起始日期和截止日期的那种。

因为很多代码不懂，这个直到第二天上午才终于解决。师兄给我发了一个后端需要添加的代码，剩下的就我自己琢磨去了。

<if test="params.beginTime != null and params.beginTime != ''"><!-- 开始时间检索 -->
                        AND date_format(u.create_time,'%y%m%d') &gt;= date_format(#{params.beginTime},'%y%m%d')
                </if>
                <if test="params.endTime != null and params.endTime != ''"><!-- 结束时间检索 -->
                        AND date_format(u.create_time,'%y%m%d') &lt;= date_format(#{params.endTime},'%y%m%d')
                </if>

这段代码加在了对应的配置文件.xml文件中。

 

 前端代码部分：（显示）

 <el-form-item label="日期" >
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

（方法）

 重置按钮操作中新添一行代码用来对日期进行重置。

最终实现效果：

完成任务，哈哈。

参考学习博客：vue中DateTimePicker日期时间选择器_aloofAnd的博客-CSDN博客_vue时间控件datepicker

vue-时间控件以及时间控件校验_程序员的每一天的博客-CSDN博客_vue时间控件