Javascript Date解析和格式化
程序员文章站
2022-05-01 18:09:54
...
最近由于项目需要对web开发相对较多，也发现了很多问题。特别是对日期操作的需求量较大：转换、解析、格式化...等等。关于格式化的在搜索引擎能找到很多，但是关于解析日期字符串却很少；ECMAscript3提供的标准中倒是有 Date.parse()，但比较难使用(纯属个人观点)。
今天花了几个小时做了个简单的日期处理，同时记录下格式化、日期字符串解析的扩展。
欢迎轻喷
- 日期格式化(该代码非本人编写，具体出处由于时间太长已经无从考究，在此感谢作者)
/**
* 日期格式化
*
* @param format
* {String} 格式化规则, 默认值:yyyy-MM-dd hh:mm:ss
*/
Date.prototype.format = function(format) {
format = (format || "yyyy-MM-dd hh:mm:ss");
var time = this.getTime();
if (isNaN(time)) { return; }
var o = {
// month
"M+": this.getMonth() + 1,
// day
"d+": this.getDate(),
// hour
"h+": this.getHours(),
// minute
"m+": this.getMinutes(),
// second
"s+": this.getSeconds(),
// quarter
"q+": Math.floor((this.getMonth() + 3) / 3),
// millisecond
"S": this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for ( var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
};
- 日期字符串解析
解析功能也是作为原型扩展方式，真心希望 ECMAscript5 能让平台默认就实现这个功能。
/**
* 解析日期字符串
*
* @param dateStr
* {String} 日期字符串
* @param pattern
* {String} 字符串规则, 默认值:yyyy-MM-dd
* @returns {Date} 成功解析后返回日期对象, 解析失败返回null
*/
Date.prototype.parseDate = function(dateStr, pattern) {
var metaPatterns = {
/** 元规则决策表 */
metas: {
/** 年规则 */
y: {
name: "Year",
beginIndex: -1,
pLength: 0,
original: "",
setYear: function(date) {
date.setFullYear(this.original || 0);
}
},
/** 月规则 */
M: {
name: "Month",
beginIndex: -1,
pLength: 0,
original: "",
setMonth: function(date) {
date.setMonth((!this.original.length || isNaN(this.original)) ? 0 : (this.original - 1));
}
},
/** 月中的天数规则 */
d: {
name: "Day",
beginIndex: -1,
pLength: 0,
original: "",
setDay: function(date) {
date.setDate(this.original || 0);
}
},
/** 小时规则 */
h: {
name: "Hour",
beginIndex: -1,
pLength: 0,
original: "",
setHour: function(date) {
date.setHours(this.original || 0);
}
},
/** 分钟规则 */
m: {
name: "Minute",
beginIndex: -1,
pLength: 0,
original: "",
setMinute: function(date) {
date.setMinutes(this.original || 0);
}
},
/** 秒规则 */
s: {
name: "Second",
beginIndex: -1,
pLength: 0,
original: "",
setSecond: function(date) {
date.setSeconds(this.original || 0);
}
},
/** 毫秒规则 */
S: {
name: "Millisecond",
beginIndex: -1,
pLength: 0,
original: "",
setMillisecond: function(date) {
date.setMilliseconds(this.original || 0);
}
},
},
/**
* 设值
*
* @param date
* {Date} 目标日期
* @returns {Date} 修改后日期
*/
setValues: function(date) {
this.metas.y.setYear(date);
this.metas.M.setMonth(date);
this.metas.d.setDay(date);
this.metas.h.setHour(date);
this.metas.m.setMinute(date);
this.metas.s.setSecond(date);
this.metas.S.setMillisecond(date);
return date;
},
/**
* 校验器
*
* @param orgiDateStr
* {String} 日期字符串
* @param tgtPattern
* {String} 解析规则
* @returns {Boolean} true-解析成功, false-规则不能匹配日期字符串
*/
validate: function(orgiDateStr, tgtPattern) {
var NUMBER_PATTERN = "\\d";
var replacedPattern = (tgtPattern || "") + "";
if (!replacedPattern) return false;
// 记录当前所能支持的所有元字符
var metasStr = [];
for ( var meta in this.metas) {
metasStr.push(meta);
}
// 替换pattern中年月日时分秒的字符为\d
replacedPattern = replacedPattern.replace(/\//g, "\\/");
metasStr.each(function(meta) {
replacedPattern = replacedPattern.replace(eval("(/" + meta + "/g)"), NUMBER_PATTERN);
});
replacedPattern = replacedPattern.replace(/\\\\/g, "\\").replace(/[\/]/g, "\/");
// 使用替换后的pattern校验dateStr是否有效
var result = eval("(/^" + replacedPattern + "$/)").test(orgiDateStr);
if (result) {
var _this = this;
// 校验通过, 按顺序设置元规则开始索引和值
// > 按元规则分组
var metasGroup = metasStr.join("");
// /([yMdhms])\1*/g: 提取的元规则
var groupRegExp = eval("(/([" + metasGroup + "])\\1*/g)");
// 替换掉日期字符串分隔符字符
var onlyNumberDateStr = orgiDateStr.replace(/[^\d]+/g, "");
// 把原pattern中的年月日时分秒解为有序的正则表达式数组,
var orgiValIdx = 0;
tgtPattern.match(groupRegExp).each(function(metaGroup) {
// :> 设置每个组的 beginIndex, pLength, original
var meta = _this.metas[metaGroup[0]];
meta.beginIndex = tgtPattern.indexOf(metaGroup);
meta.pLength = metaGroup.length;
meta.original = onlyNumberDateStr.substring(orgiValIdx, (orgiValIdx + meta.pLength));
orgiValIdx += meta.pLength;
});
}
return result;
}
};
// 解析完成后按Date构造顺序构建目标Date对象
var success = metaPatterns.validate(dateStr, pattern);
if (!success) {
return null;
} else {
metaPatterns.setValues(this);
return this;
}
};
上面的代码会依赖 Array.each 的原型扩展
/**
* 遍历数组
*
* @param callback
* {Function} 回调函数, 参数:v-[value],i-[index]
* @param begin
* {Number} 开始下标, 默认0
* @returns {Boolean} true-已遍历所有元素, false-仅遍历部分元素
*/
Array.prototype.each = function(callback, begin) {
begin = (begin || 0);
callback = (callback || function() {
});
var useEvery = true;
for (var i = 0; i < this.length; i++) {
if (i >= begin && false == callback(this[i], i)) {
useEvery = (i == this.length - 1);
break;
}
}
return useEvery;
};
在开发中一直存在一个疑惑，W3CSchool 中提供的时间设置说明。
通过多次测试(Google Chrom版本 46.0.2490.86，IE版本11.0.9600.18321)，发现以上三个值都是从1开始而非从0开始。
如在使用中发现问题欢迎在此留言探讨！
推荐阅读