日期组件,精确日期到分秒,以及类型的转换

先看图就这种:

实现:

    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   密保问题随便填写

        

原文地址:https://www.cnblogs.com/liglacier/p/11227634.html