修改easyui datebox默认日期格式

问题描述： 根据jquery easyui datebox demo中给的示例，导入和使用datebox, 发现日期格式为： 6/22/2011， 其他的今天和关闭也是 Today, Close， 对中文用户有些不习惯。
期待效果： 日期格式 2011-06-22  今天 关闭
解决方案：  导入 <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script> 运用国际化定义解决此问题。

最近项目开发中要使用到日期选择框，由于使用了jquery，所以准备使用jquery easyui中的ui控件，找到他的主页，查看datebox的用法：
地址：http://www.jeasyui.com/documentation/datebox.php

Usage

[html] view plaincopy
  1. <input id="dd" type="text"></input>    

 

[javascript] view plaincopy
  1. $('#dd').datebox({    
  2.     required:true    
  3. });   

的确很容易就可以弹出日期选择框了。使用的时候发现，她的日期选择框选择的日期格式如图： 


日期格式为： 6/22/2011 ，我们平常喜欢使用的格式是“2011-06-22”， 同时 Today, Close 都为英文，要是能改成中文就好了。
于是开始求助百度，找到解决方案有以下两种：

1、在自己的jsp文件里，重载她的方法： formatter 和 parser.

[javascript] view plaincopy
  1. <script>  
  2.  $('#dd').datebox({  
  3.  closeText:'关闭',  
  4.  formatter:function(date){  
  5.   var y = date.getFullYear();  
  6.   var m = date.getMonth()+1;  
  7.   var d = date.getDate();  
  8.   var h = date.getHours();  
  9.   var M = date.getMinutes();  
  10.   var s = date.getSeconds();  
  11.   function formatNumber(value){  
  12.    return (value < 10 ? '0' : '') + value;  
  13.   }  
  14.   alert(formatNumber(h));  
  15.   return y+'-'+m+'-'+d+' '+ formatNumber(h)+':'+formatNumber(M)+':'+formatNumber(s);  
  16.  },  
  17.  parser:function(s){  
  18.   var t = Date.parse(s);  
  19.   if (!isNaN(t)){  
  20.    return new Date(t);  
  21.   } else {  
  22.    return new Date();  
  23.   }  
  24.  }  
  25. });  
  26. </script>  


有个哥们儿建议的方案是这样，的却这样可以实现修改选择日期格式为：  2011-06-22  中文汉字等功能，但是每个页面都要加这么一个函数怪费劲的，于是想想能不能来个全局的修改，不就省事儿了吗？改一次，全部都可以用。于是找到了第二个解决方案。
第一个方案地址：  http://zzx19452008-163-com.iteye.com/blog/894150


2、修改jquery easyui 的源代码

[javascript] view plaincopy
  1. //------------------格式化时间为 yyyy-MM-dd ---------------------------------------  
  2. $.fn.datebox.defaults.formatter = function(date) {  
  3. var y = date.getFullYear();  
  4. var m = date.getMonth() + 1;  
  5. var d = date.getDate();  
  6. return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);  
  7. };  
  8. //  
  9. $.fn.datebox.defaults.parser = function(s) {  
  10. if (s) {  
  11. var a = s.split('-');  
  12. var d = new Date(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2]));  
  13. return d;  
  14. } else {  
  15. return new Date();  
  16. }  
  17.   
  18. };  
  19.   
  20.   
  21.   
  22. 直接加到 jquery.easyui.min.js 最后就可以了，然后找到  $.fn.calendar.defaults  修改为如下格式就OK了。  
  23.   
  24.   
  25. $.fn.calendar.defaults = {width:180, height:180, fit:false, border:true, weeks:["一", "二", "三", "四", "五", "六", "日"], months:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], year:new Date().getFullYear(), month:new Date().getMonth() + 1, current:new Date(), onSelect:function (_6f) {  
  26. }};   


觉得这个方案挺好的，修改一次可以全部搞定，虽然有点侵入性。但是不管了，能解决问题就是王道。改完之后，发现没多大反应，解决方案失败。
第二个方案地址： http://www.iteye.com/topic/855905

在修改源代码的过程中，偶然发现在/locale/easyui-lang-zh_CN.js文件里居然有我们要修改的内容，这是什么情况？
难道是搞得国际化多国语言支持？官网上给的demo示例，没有导入国际化的支持啊，试试吧，也许行呢？

源文件里的 datebox demo示例：

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>DateBox - jQuery EasyUI Demo</title>  
  6.     <span style="background-color: rgb(153, 255, 255); "><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">  
  7.     <link rel="stylesheet" type="text/css" href="../themes/icon.css">  
  8.     <link rel="stylesheet" type="text/css" href="demo.css">  
  9.     <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>  
  10.     <script type="text/javascript" src="../jquery.easyui.min.js"></script></span>  
  11.     <script>  
  12.         function disable(){  
  13.             $('#dd').datebox('disable');  
  14.         }  
  15.         function enable(){  
  16.             $('#dd').datebox('enable');  
  17.         }  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.     <h2>DateBox</h2>  
  22.     <div class="demo-info">  
  23.         <div class="demo-tip icon-tip"></div>  
  24.         <div>Allow you to select date in your form.</div>  
  25.     </div>  
  26.       
  27.     <div style="margin:10px 0;">  
  28.         <a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>  
  29.         <a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>  
  30.     </div>  
  31.     <input id="dd" class="easyui-datebox" required="true"></input>  
  32. </body>  
  33. </html>  


加入/locale/easyui-lang-zh_CN.js：

[javascript] view plaincopy
  1. <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>  



选择日期。居然得到想要的格式。见图片：


ok, 问题解决。真是感叹这外国人的架构原来设计的这么好用，佩服！

 

 

转自：http://blog.csdn.net/walkerjong/article/details/7514026

posted on 2014-04-03 13:21  wcq  阅读(878)  评论(0)  编辑  收藏  举报

导航