easyUI 日期控件修改...

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

个人觉得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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值