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>
3、在mvc:annotation-driven标签中加入conversion-service=“conversionService”,同时给全局时间转换器bean加上id=“conversionService”