本文介绍如何解决C#后端返回的JSON日期在前端JS中显示异常的问题。通过扩展Date原型及自定义解析函数,将/Date(timestamp)/格式转换为标准日期字符串,并提供Ajax调用示例,帮助开发者实现日期字段的正确展示。
问题背景
起因
当C#后端返回的日期字段经过JSON序列化后,在前端JavaScript中直接显示往往不是直观的日期格式,这给开发带来不便。为了避免将所有日期字段强制转换为字符串,需要寻找一种JS扩展方法来处理这一格式转换问题。
实现方案
实现
日期解析函数
function ChangeDateFormat(jsondate) {
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
if (jsondate.indexOf("+") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("+"));
}
else if (jsondate.indexOf("-") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("-"));
}
var date = new Date(parseInt(jsondate, 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear()
+ "年"
+ month
+ "月"
+ currentDate
+ "日"
+ " "
+ date.getHours()
+ ":"
+ date.getMinutes();
}
//调用:ChangeDateFormat(data[i].arrDate)
调用示例
调用
Ajax调用示例
$.ajax({
type: "Get",
textType: "json",
url: "/UserInfo/GetUserWithdraw",
data: { id: id },
success: function (data) {
var result = html.replace(reg, function (node, key) {
return {
'Money': data.Money,
'AddTime': ChangeDateFormat(data.AddTime),
'CashTime': data.CashTime
}[key];
});
TsingdaTips.ask({ msg: result, show_btn: false, title: "提现申请详情" });//预计打款时间等于申请时音后的(5号或20号)
}
});
格式化处理
PS:返回的json时间如 /Date(1290371638000)/ 形式,怎样处理成 yyyy-MM-dd 这类格式
去掉/Date
直接格式化1290371638000
Date原型扩展
/**
* 时间对象的格式化;
*/
Date.prototype.format = function(format){
/*
* eg:format="YYYY-MM-dd hh:mm:ss";
*/
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
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;
}
使用示例
使用方法:
格式化输出示例
var testDate = new Date();
var testStr = testDate.format("YYYY年MM月dd日hh小时mm分ss秒");
alert(testStr);