easyUI 日期控件修改...

来源：互联网发布：淘宝定金链接怎么发货编辑：程序博客网时间：2024/05/03 01:24

个人觉得easyUI挺好用的。

它的中文文档地址： http://www.zi-han.net/case/easyui/

日期本来效果是这样的：

改为中式的，方法如下：

首先是月份的，找到下面的代码：

（这段代码在 jquery.easyui.min.js 中，Ctrl+F 查找"Jan",一下就找到了。）

1 $.fn.calendar.parseOptions=function(_454){2 var t=$(_454);3 return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));4 };5 $.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["S","M","T","W","T","F","S"],months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date(),onSelect:function(date){6 }};7 })(jQuery);

改成下面的对应的

1 $.fn.calendar.parseOptions=function(_454){2 var t=$(_454);3 return $.extend({},$.parser.parseOptions(_454,["width","height",{firstDay:"number",fit:"boolean",border:"boolean"}]));4 };5 $.fn.calendar.defaults={width:180,height:180,fit:false,border:true,firstDay:0,weeks:["一", "二", "三", "四", "五", "六", "日"], months:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], year:new Date().getFullYear(),month:new Date().getMonth()+1,current:new Date(),onSelect:function(date){6 }};7 })(jQuery);

today、close 改为：今天、关闭。方法同上。

格式修改，默认的是月/日/年的格式，如果换成的2016-07-28这样的，官方也给出了代码，如下：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Basic DateBox - jQuery EasyUI Demo</title> 6 <link rel="stylesheet" type="text/css" href="css/easyui.css"> 7 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 8 <script type="text/javascript" src="js/jquery.easyui.min.js"></script> 9 </head>10 <body>11 <div class="date">12 <input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>13 </div>14 </body>15 <script type="text/javascript">16 function myformatter(date){17 var y = date.getFullYear();18 var m = date.getMonth()+1;19 var d = date.getDate();20 return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);21 }22 function myparser(s){23 if (!s) return new Date();24 var ss = (s.split('-'));25 var y = parseInt(ss[0],10);26 var m = parseInt(ss[1],10);27 var d = parseInt(ss[2],10);28 if (!isNaN(y) && !isNaN(m) && !isNaN(d)){29 return new Date(y,m-1,d);30 }else{31 return new Date();32 }33 }34 </script>35 </html>

就是在自己的代码里给日期标签加上属性：data-options="formatter:myformatter,parser:myparser" 并且如图写上那两个 function... 就行了。

现在效果：

其实我还想改它的基调色彩，还在找改法。谁知道怎么改，请告诉我。

在管网上似乎看到过我想要的那个效果，基调是gray色调的。

参考：http://www.cnblogs.com/asqq/archive/2013/05/27/3195001.html

0 0