修改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- <input?id="dd"?type="text"></input>????
[javascript]?view plaincopy- $('#dd').datebox({????
- ????required:true????
- });???
的确很容易就可以弹出日期选择框了。使用的时候发现，她的日期选择框选择的日期格式如图：?
日期格式为： 6/22/2011 ，我们平常喜欢使用的格式是“2011-06-22”， 同时 Today, Close 都为英文，要是能改成中文就好了。
于是开始求助百度，找到解决方案有以下两种：
1、在自己的jsp文件里，重载她的方法： formatter 和 parser.
[javascript]?view plaincopy
- <script>??
- ?$('#dd').datebox({??
- ?closeText:'关闭',??
- ?formatter:function(date){??
- ??var?y?=?date.getFullYear();??
- ??var?m?=?date.getMonth()+1;??
- ??var?d?=?date.getDate();??
- ??var?h?=?date.getHours();??
- ??var?M?=?date.getMinutes();??
- ??var?s?=?date.getSeconds();??
- ??function?formatNumber(value){??
- ???return?(value?<?10???'0'?:?'')?+?value;??
- ??}??
- ??alert(formatNumber(h));??
- ??return?y+'-'+m+'-'+d+'?'+?formatNumber(h)+':'+formatNumber(M)+':'+formatNumber(s);??
- ?},??
- ?parser:function(s){??
- ??var?t?=?Date.parse(s);??
- ??if?(!isNaN(t)){??
- ???return?new?Date(t);??
- ??}?else?{??
- ???return?new?Date();??
- ??}??
- ?}??
- });??
- </script>??
有个哥们儿建议的方案是这样，的却这样可以实现修改选择日期格式为： ?2011-06-22 ?中文汉字等功能，但是每个页面都要加这么一个函数怪费劲的，于是想想能不能来个全局的修改，不就省事儿了吗？改一次，全部都可以用。于是找到了第二个解决方案。
第一个方案地址：??http://zzx19452008-163-com.iteye.com/blog/894150
2、修改jquery easyui 的源代码
[javascript]?view plaincopy
- //------------------格式化时间为?yyyy-MM-dd?---------------------------------------??
- $.fn.datebox.defaults.formatter?=?function(date)?{??
- var?y?=?date.getFullYear();??
- var?m?=?date.getMonth()?+?1;??
- var?d?=?date.getDate();??
- return?y?+?'-'?+?(m?<?10???'0'?+?m?:?m)?+?'-'?+?(d?<?10???'0'?+?d?:?d);??
- };??
- //??
- $.fn.datebox.defaults.parser?=?function(s)?{??
- if?(s)?{??
- var?a?=?s.split('-');??
- var?d?=?new?Date(parseInt(a[0]),?parseInt(a[1])?-?1,?parseInt(a[2]));??
- return?d;??
- }?else?{??
- return?new?Date();??
- }??
- ??
- };??
- ??
- ??
- ??
- 直接加到?jquery.easyui.min.js?最后就可以了，然后找到??$.fn.calendar.defaults??修改为如下格式就OK了。??
- ??
- ??
- $.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)?{??
- }};???
觉得这个方案挺好的，修改一次可以全部搞定，虽然有点侵入性。但是不管了，能解决问题就是王道。改完之后，发现没多大反应，解决方案失败。
第二个方案地址：?http://www.iteye.com/topic/855905
在修改源代码的过程中，偶然发现在/locale/easyui-lang-zh_CN.js文件里居然有我们要修改的内容，这是什么情况？
难道是搞得国际化多国语言支持？官网上给的demo示例，没有导入国际化的支持啊，试试吧，也许行呢？
源文件里的 datebox demo示例：
[html]?view plaincopy
- <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">??
- <html>??
- <head>??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">??
- <title>DateBox?-?jQuery?EasyUI?Demo</title>??
- ????<span?style="background-color:?rgb(153,?255,?255);?"><link?rel="stylesheet"?type="text/css"?href="../themes/default/easyui.css">??
- ????<link?rel="stylesheet"?type="text/css"?href="../themes/icon.css">??
- ????<link?rel="stylesheet"?type="text/css"?href="demo.css">??
- ????<script?type="text/javascript"?src="../jquery-1.7.2.min.js"></script>??
- ????<script?type="text/javascript"?src="../jquery.easyui.min.js"></script></span>??
- ????<script>??
- ????????function?disable(){??
- ????????????$('#dd').datebox('disable');??
- ????????}??
- ????????function?enable(){??
- ????????????$('#dd').datebox('enable');??
- ????????}??
- ????</script>??
- </head>??
- <body>??
- ????<h2>DateBox</h2>??
- ????<div?class="demo-info">??
- ????????<div?class="demo-tip?icon-tip"></div>??
- ????????<div>Allow?you?to?select?date?in?your?form.</div>??
- ????</div>??
- ??????
- ????<div?style="margin:10px?0;">??
- ????????<a?href="#"?class="easyui-linkbutton"?onclick="disable()">Disable</a>??
- ????????<a?href="#"?class="easyui-linkbutton"?onclick="enable()">Enable</a>??
- ????</div>??
- ????<input?id="dd"?class="easyui-datebox"?required="true"></input>??
- </body>??
- </html>??
加入/locale/easyui-lang-zh_CN.js：
[javascript]?view plaincopy
- <script?type="text/javascript"?src="../locale/easyui-lang-zh_CN.js"></script>??
选择日期。居然得到想要的格式。见图片：
ok, 问题解决。真是感叹这外国人的架构原来设计的这么好用，佩服！
?
?
转自：http://blog.csdn.net/walkerjong/article/details/7514026