今天发现easyui的datetimebox不能正常显示日期,接着自然就是实现toDate的功能,google了下,没找到满意的,都写的很罗嗦。自己写一个,本来以为js的正则也可以用命名group来弄,但是目前看javascript好像不支持。现在实现的代码如下,希望对有需要的人也有帮助。
//by dragonimp 2015.5.3
//使用方法:
//"2015-5-5 9:10:10".toDate("yyyy-M-d hh:mm:ss")
//"2015/5/5 9:10:10".toDate("yyyy/M/d hh:mm:ss")
String.prototype.toDate = function (fmt) {
if (fmt == null) fmt = 'yyyy-MM-dd hh:mm:ss';
var str = this;
//fmt为日期格式,str为日期字符串
var reg = /([yMdhmsS]+)/g;//日期格式中的字符
var key = {};
var tmpkeys = fmt.match(reg);
for (var i = 0 ; i < tmpkeys.length; i++) {
key[tmpkeys[i].substr(0, 1)] = i + 1;
}
var r = str.match(fmt.replace(reg, "(\\d+)"));
return new Date(r[key["y"]], r[key["M"]] - 1, r[key["d"]], r[key["h"]], r[key["m"]], r[key["s"]], r[key["S"]]);
}
附:easyui的问题和解决方法。
问题:
<input type="text" value="2015/5/6 23:00:00" id="xxxx" class="easyui-datetimebox" />这个显示出来的控件,日期的“日”部分显示不正确,会显示当天的日期。
检查了下,easyui已经引用了中文的资源文件,看了下资源文件,应该只支持"-"分割的日期,我这里是"/"
解决:需要自己实现formatter和parser。
1.加上options<input type="text" value="2015/5/6 23:00:00" id="xxxx" class="easyui-datetimebox" data-options="formatter:datetimebox_format,parser:datetimebox_parse" />
2.实现解析和格式化函数
function datetimebox_format(date) {
return date.toFormatString("yyyy/M/d h:mm:ss");
}
function datetimebox_parse(s) {
return s.toDate("yyyy/M/d hh:mm:ss");
}
//a)转日期的,见前面我的toDate
//b)下面转字符串的,来自网上
Date.prototype.toFormatString = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}