EasyUI

最新推荐文章于 2024-12-01 11:57:57 发布

原创最新推荐文章于 2024-12-01 11:57:57 发布 · 245 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#dateTimeBox

前端框架专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何自定义 EasyUI 的 DateTimeBox 控件显示格式，并解决输入时间后显示为当前时间的问题。通过理解 EasyUI 的 Date 转换机制，提供了 formatter 和 parser 方法的具体实现。

datetimebox 更改显示格式

问题描述：更改datetimebox 显示格式类型

解决方式：在网上搜索该问题复制代码（导致出现新的问题）

新问题描述：显示格式现在没问题了，但是在我输入完时间后，框内的时间显示为当前时间

解决方式：有趣网上搜了一下没找到直接的解决办法（没有可以直接复制的代码）没办法，去查看了一下API ，才发现复制过来的代码是有错误的下面注释掉的代码是复制过来的，简单问题复杂化了

原理：理解了这个东西防止以后在发生类似的错误，记录一下他的原理

从控制台打印可以看出，EasyUI 是帮我们做了Date的转换，页面选择的时间一个时间值，它把转换的步骤封装了，利用他提供的parse方法把一个日期字符串（API文档上是这么叫的，其实就是时间戳）if一下然后按照相应的格式返回即可

(事实证明还是自己研究一下比较透彻，坑踩得多了感觉路就平了)

开始时间：<input id="setTime" class="easyui-datetimebox" style="width:150px" data-options="formatter:ww4,parser:w4" />

<script type="text/javascript">
 function ww4(date){  
            var y = date.getFullYear(); //年
            var m = date.getMonth()+1;  //月
            var d = date.getDate();      //日
            var h = date.getHours();      //时
            var mm = date.getMinutes(); //分
            var s = date.getSeconds();  //秒
            
              console.debug("m------"+m+"---");
       /*      return  y+'年'+(m<10?('0'+m):m)+'月'+(d<10?('0'+d):d)+'日'+(h<10?('0'+h):h)+'点'+
            (mm<10?('0'+mm):mm)+'分'+(s<10?('0'+s):s)+'秒';   */
                return  y+'/'+(m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+(h<10?('0'+h):h)+':'+
           (mm<10?('0'+mm):mm)+':'+(s<10?('0'+s):s);  
        }  
    
        function w4(date){  
          /*   var reg=/[\u4e00-\u9fa5]/;  //利用正则表达式分隔  
            var ss = (s.split(reg));  
            var y = parseInt(ss[0],10);  
            var m = parseInt(ss[1],10);  
            var d = parseInt(ss[2],10);  
            var h = parseInt(ss[3],10);  
            var mm = parseInt(ss[4],10);  
            var s = parseInt(ss[5],10);  
            console.debug("y---"+y+"---"+ss[0],10);
            console.debug("m------"+m+"---"+ss[0],10);
            console.debug("d---"+d+"---"+ss[2],10);
            console.debug("h---"+h+"---"+ss[3],10);
            console.debug("mm---"+mm+"---"+ss[4],10);
            console.debug("s---"+s+"---"+ss[5],10); */
            
           /* if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h)&& !isNaN(mm)&& !isNaN(s)){  
                return new Date(y,m-1,d,h,mm,s);  
            } else {  
                return new Date();  
            }  */ 
            var t=Date.parse(date);
            console.debug("t---"+t+"---");
              if (!isNaN(t)){
                return new Date(t);
            } else {
                return new Date();
            }
        
        }  
</script>