day03 bootstrap的下拉选择框和My97DatePicker以及全局类型转换器

本文链接：https://blog.csdn.net/BeLoved_Code/article/details/105405398

bootstrap下拉选择框

在这里插入图片描述

第一步、引入css和js

<link rel="stylesheet" type="text/css" href="static/js/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link href="static/js/bootstrap-select.css" rel="stylesheet">
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

第二步、在select标签上加 class=“selectpicker” name=“dss” data-live-search=“true” 属性（search是搜索）
第三步、在回调函数内部最后：$(".selectpicker" ).selectpicker(‘refresh’);（动态加载数据）
在这里插入图片描述

My97DatePicker

官网地址：http://www.my97.net/index.asp
官方文档：http://www.my97.net/demo/index.htm
引入js

<script type="text/javascript" src="static/js/My97DatePicker/WdatePicker.js"></script>

在这里插入图片描述
给输入框加个id，因为My97DatePicker要挂载这个id

<input type="text" name="starttime" id="starttime"/>

相对地址引入插件包中的图片，并加入onclick事件、挂载id

<img onclick="WdatePicker({el:'starttime',skin:'twoer',minDate:'%y-%M-%d'})" src="static/js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">

更换皮肤
步骤1：先在官网下载好皮肤包
在这里插入图片描述
步骤2:导入到My97DatePicker下的skin目录下，在WdatePicker.js中添加配置信息

{name:'twoer', charset:'gb2312'},

步骤3：在页面进行引用，twoer为下载的皮肤包文件夹名称
在这里插入图片描述
日期范围限制

过去的时间不能选择
设置minDate属性：minDate:’%y-%M-%d’
完整代码

<td align="right" bgcolor="#FAFAF1" height="22">开始时间：</td>
<td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';"
    onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
    <input type="text" name="starttime" id="starttime"/>
    <img onclick="WdatePicker({el:'starttime',skin:'twoer',minDate:'%y-%M-%d'})" src="static/js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
</td>

全局类型转换器

1、新建DateTimeConverter类

@Component
public class DateTimeConverter implements Converter<String, Date> {
    public Date convert(String s) {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        try {
            Date date = sdf.parse(s);
            return date;
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return null;
    }
}

2、在Springmvc配置中配置全局类型转换器
如果前端传递数据和后端接收数据的数据类型不一致就会报400状态码
比如说前端传递string，后端实体类要求的是date类型
可以通过全局类型转换器来解决

<!--配置全局时间转换器-->
<bean id="conversionService" class="org.springframework.format.support.FormattingConversionServiceFactoryBean">
    <property name="converters">
        <set>
            <ref bean="dateTimeConverter"></ref>
        </set>
    </property>
</bean>