批改easyui datebox默认日期格式

2012-07-19

修改easyui datebox默认日期格式问题描述：根据jquery easyui datebox demo中给的示例，导入和使用datebox,

修改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

热点排行

开源软件

批改easyui datebox默认日期格式