先看图就这种:
实现:
1先引入js
laydate.js 可以去网上找一下引入
使用:
html:
<label class="col-md-6 control-label"><span class="font-red">*</span>开始时间:</label>
<div class="col-md-6 input-group">
<input type="text" class="form-control layui-input"
id="start_time" name="startTime" placeholder="请选择开始时间"readonly="readonly"required="required">
</div>
<label class="col-md-6 control-label"><span class="font-red">*</span>结束时间:</label>
<div class="col-md-6 input-group">
<input type="text" class="form-control layui-input" id="end_time"
name="endTime" placeholder="请选择结束时间"readonly="readonly" required >
</div
js:
//时间选择器
laydate.render({
elem : '#start_time',
type : 'datetime'
});
laydate.render({
elem : '#end_time',
type : 'datetime'
});
然后我提交表单数据报错了。。。。。
错误信息:Failed to convert from type java.lang.String to type java.util.Date for value '2019-07-22 17:41:13'; nested exception is java.lang.IllegalArgumentException]",
打断点走一走,咦发现后台接口没走到就错误了,还以为是前台的问题呢,
解决方式:
后台添加代码:
@InitBinder
public void initBinder(WebDataBinder binder, WebRequest request) {
//转换日期 注意这里的转化要和传进来的字符串的格式一直 如2015-9-9 就应该为yyyy-MM-dd
DateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));// CustomDateEditor为自定义日期编辑器
}
具体详解看网站:https://cloud.tencent.com/developer/article/1332690
ok解决了。
其他用到的:
<fmt:formatDate value="${pcgl.startTime}" pattern=" yyyy年MM月dd:HH:mm E"/>
<input type="text" class="form-control layui-input"
id="start_time" name="startTime" value="<fmt:formatDate value="${info.startTime}" pattern="yyyy-MM-dd HH:mm:ss" />"
大概就这些了吧,来自垃圾程序员bcli的总结,有兴趣大家可以一起交流问题QQ:308080198 密保问题随便填写