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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/452205.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/452205.shtml
英文地址，請注明出處：http://en.pswp.cn/news/452205.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！