`
dinguangx
  • 浏览: 244767 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript格式化日期

阅读更多
   对日期型数据进行格式化是我们经常遇到的一个问题,但是javascript中并没有提供对日期进行格式化的函数,所以在网上就出现了很多版本的格式化函数,写法不尽相同,但基本都可以达到所需的目标。我这里也写出了一个类似功能的函数,一来巩固一下所学的javascript知识,也可以给大家提供一个参考。
    下面是这个函数的主体实现部分:
    /**
 * 对日期进行格式化,
 * @param date 要格式化的日期
 * @param pattern 进行格式化的模式
 *     支持的模式字母有:
 *     y:年,
 *     M:年中的月份(1-12),
 *     d:月份中的天(1-31),
 *     H:小时(0-23),
 *     h:小时(0-12),
 *     m:分(0-59),
 *     s:秒(0-59),
 *     S:毫秒(0-999),
 *     E:星期(以汉语表示),
 *     e:星期(以英文表示),
 *     A:上午/下午标识,
 *     a:AM/PM标识
 * @return
 */
function formatDate(date,pattern){
	var d;
	if((d=parseDate(date))==null){
		return "";
	}
	if(!pattern){
		pattern = "yyyy-MM-dd";
	}
	var arrWeek = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六","Sunday","Monday","Tuesday","Tuesday","Thursday","Friday","Saturday"];
	var value = new Object();
	value["y"] = parseString(date.getFullYear());
	value["M"] = parseString(date.getMonth() + 1);
	value["d"] = parseString(date.getDate());
	value["H"] = parseString(date.getHours());
	value["h"] = parseString(value["H"] > 12 ? (value["H"]-12) : value["H"]);
	value["m"] = parseString(date.getMinutes());
	value["s"] = parseString(date.getSeconds());
	value["S"] = parseString(date.getMilliseconds());
	value["E"] = arrWeek[date.getDay()];
	value["e"] = arrWeek[date.getDay() + 7];
	value["a"] = (value["H"] > 12 ? "PM" : "AM");
	value["A"] = (value["H"] > 12 ? "下午" : "上午");
	var result = "";
	var i = 0;
	var hasE = false;//是否出现过星期
	var hasAMPM = false;//是否出现过上午下午
	while(i < pattern.length){
		var c = pattern.charAt(i++);
		var lc = c;//记录本次要处理的字母,如'y'
		var tmpStr = c;//本次在处理的字母格式,如'yyyy'
		while(i < pattern.length && (c=pattern.charAt(i))==lc){
			tmpStr += c;
			i++;
		}
		if(value[lc]!=""&&value[lc]!=null&&value[lc]!="undefined"){
			//本次要处理的字母是模式母
			if((lc == "E" || lc == "e") && !hasE){
				//星期
				result += value[lc];
				hasE = true;
			} else if(lc == "E" || lc == "e") {
				result += tmpStr;
			} else if((lc=="a" || lc == "A")  && !hasAMPM){
				//上下午
			    result += value[lc];
				hasAMPM = true;
			} else if((lc=="a" || lc == "A") ){
			    result += tmpStr;
			} else {
				//如果是 单个的日期,月份,小时,分,秒的字符串,不能再进行字符串的截取操作
			    if(tmpStr == "d" || tmpStr == "M" || tmpStr=="H" || tmpStr=="h" || tmpStr == "m" || tmpStr == "s"){
					result += value[lc];
				} else {
					result += value[lc].fillChar(tmpStr.length);
				}
			}
		} else {//非模式字母,直接输出
		    result += tmpStr;
		}
	}
	return result;
}

    先来看一下它能给我们带来什么样的效果吧,测试的代码如下:
var date = new Date();
document.write(formatDate(date,"yyyy-MM-dd HH:mm:ss.SSS E") + "<br>");
document.write(formatDate(date,"yyyy年MM月dd日 HH时mm分ss秒 E") + "<br>");
document.write(formatDate(date,"yyyy-M-d hh:mm:ss.SSS A E") + "<br>");
document.write(formatDate(date,"MM/dd/yy hh:mm:ss a e") + "<br>");
document.write(formatDate(date,"M/d/yyyy") + "<br>");
document.write(formatDate(date,"yyyyyy年MMMMMMM月ddddddd日 HH时mm分ss秒 EEEEE") + "<br>");[color=red]最后这个有点变态了,看它会出现什么结果[/color]
??为什么这里不能显示为红色呢

测试输出为:
2010-10-07 17:08:34.187 星期四
2010年10月07日 17时08分34秒 星期四
2010-10-7 05:08:34.187 下午 星期四
10/07/10 05:08:34 PM Thursday
10/7/2010
002010年0000010月0000007日 17时23分41秒 星期四

    完成上面的测试之后,发现这个函数已经可以较好地为我们提供所需的功能了。这里所采用的模式字母主要参照java中的模式字母,但是只实现其中一部分的模式字母功能。函数中的代码已经尽可能地增加了注释,为以后的再修改及大家的参考提供方便。
     在上面的函数中,用到了几个功能函数,下面是它们的代码清单。其中,前两个函数比较简单,相信很多人也都对这种功能不莫生;后面的fillChar函数类似于oracle中的lpad与rpad函数,但也可以进行字符串的截取操作。上面的对年份进行截取采用的就是fillChar函数;测试中的那个比较变态的格式串采用的就是它的lpad与rpad的功能。
function parseDate(value) {
	var date = null;
	if (Date.prototype.isPrototypeOf(value)) {
		date = value;
	} else if (typeof (value) == "string") {
		date = new Date(value.replace(/-/g, "/"));
	} else if (value != null && value.getTime) {
		date = new Date(value.getTime());
	}
	;
	return date;
};

/**
 * 将对象转换为字符串类型
 */
function parseString(value) {
	if (value == null) {
		return "";
	} else {
		return value.toString();
	}
};
String.prototype.fillChar = function(length,mode,char){
	if(!char){
		char = "0";
	}
	if(this.length>length){//比实际想要的长度更大
		if(mode=="after"){//如果是要在后面填充,截取的时候会将会后面的部分截取掉
			return this.substr(0,length);
		} else {//默认截取前一部分的数据
			return this.substr(this.length - length,length);
		}
	}
	var appendStr = "";
	for(var i = 0; i < (length - this.length)/char.length;i++){
		appendStr += char;
	}
	if(mode == "after"){
		return this + appendStr;
	}
	else {
		return appendStr + this;
	}
};

   功能算是实现了,但是做为javascript的初学者,对这样的代码书写格式及代码的效率都难以把握。希望高手看到后能对效率优化及代码优化方面不吝指导。
分享到:
评论
1 楼 lybykw 2010-07-22  
很好的程序算法。学习了。

相关推荐

    JavaScript格式化日期

    在JavaScript中,日期格式化是一项常见的任务,尤其是在处理用户界面展示或者数据存储时。`Date`对象是JavaScript内置的对象,提供了处理日期和时间的各种方法。在这个场景中,我们需要将一个像"XXXX年XX月XX日"这样...

    js 格式化日期 JavaScript格式化日期类型

    js 语言的格式化日期格式的类。很好用的。

    JavaScript 格式化时间日期

    8. **Intl.DateTimeFormat API**: JavaScript的国际化API(Intl.DateTimeFormat)提供了一种标准化的方式来格式化日期和时间,可以根据地区设置进行本地化。 9. **时区处理**: JavaScript的`Date`对象默认处理的是...

    javascript日期格式化

    在JavaScript中,我们可以使用内置的`Date`对象来创建、操作和格式化日期。 首先,`Date`对象是JavaScript中的内置构造函数,可以用来创建一个新的日期实例。例如: ```javascript let date = new Date(); // 创建...

    jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件.zip

    jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件 使用JavaScript格式输出日期输出的jQuery dateformat插件- 拥有的,jQuery是最小的日期格式库。 ! 安装下载最新的jquery.dateFormat.js 或者 jquery....

    JavaScript - 格式化日期时间.zip

    Date对象是JavaScript的内置对象,它提供了创建、操作和格式化日期的方法。你可以通过new关键字来创建一个新的Date实例,例如: ```javascript let date = new Date(); ``` 这将创建一个表示当前日期和时间的新...

    JavaScript格式化工具

    JavaScript格式化工具是一种用于优化和清理JavaScript代码的实用程序,旨在提高代码的可读性和可维护性。在编程过程中,代码可能会因为各种原因变得混乱,例如手动缩进错误、不必要的空格或换行等。此时,JavaScript...

    javascript精确计算日期处理金额格式化

    Date对象是JavaScript中的内置对象,可以用来创建、操作和格式化日期。它提供了一些基本的方法,如`getFullYear()`, `getMonth()`, `getDate()`, `getHours()`等,用于获取日期的各个部分。然而,这些方法并不总是能...

    javascript的trim和日期时间格式化函数

    ### JavaScript中的Trim函数和日期时间格式化函数 在JavaScript中,字符串处理和日期操作是非常常见的需求,尤其是在数据清洗、格式转换等场景下。本文将详细介绍如何利用自定义方法实现字符串的Trim功能以及日期...

    javascript 日期数字文本格式化

    在JavaScript中,日期和数字的文本格式化是一个常见的需求,特别是在构建用户界面或者处理数据时。这个主题主要涉及如何将日期对象转换为易读的字符串,以及如何对数字进行格式化,使其符合特定的显示标准。这篇博文...

    javascript 格式化工具

    为了提高代码可读性和团队协作效率,JavaScript格式化工具应运而生。这类工具能够自动按照一定的规则对JavaScript代码进行整理,使其更加规范和整洁。 "JavaScript 格式化工具"是开发人员必备的利器之一,它可以...

    JavaScript日期和时间格式化全指南

    JavaScript提供了多种方式来格式化日期和时间,包括原生的Date对象方法、国际化API(Intl对象)以及第三方库。本文将详细介绍这些方法,并提供实际代码示例。 在JavaScript中格式化日期和时间是一个涉及多种方法和...

    javascript 格式化时间日期函数代码脚本之家修正版

    在JavaScript开发中,日期和时间的处理是非常常见的需求之一。...最终,通过这种方式,我们可以实现一个通用的JavaScript日期时间格式化工具,使得日期时间的显示更加符合中文用户的阅读习惯,提高了用户体验。

    JavaSCript格式化工具

    使用JavaScript格式化工具,开发者可以节省大量手动调整代码格式的时间,尤其在处理大量代码或接手他人项目时。此外,许多现代IDE(集成开发环境)和代码编辑器,如Visual Studio Code、WebStorm等,都内置了代码...

    JavaScript仿PHP时间格式化函数

    在JavaScript中,日期格式化通常不如在PHP中那样灵活,因为PHP提供了强大的`date()`函数,可以使用各种模板字符串来格式化日期。然而,通过创建一个JavaScript函数,我们可以模仿PHP的这种功能,使得在前端或者Node....

    javascript格式化日期时间函数

    代码如下:function DateUtil(){}/***功能:格式化时间*示例:DateUtil.Format(“yyyy/MM/dd”,”Thu Nov 9 20:30:37 UTC+0800 2006 “);*返回:2006/11/09*/DateUtil.Format=function(fmtCode,date){ var ...

    javascript格式化工具 整理js代码

    这就是JavaScript格式化工具的作用所在,它们能够帮助开发者整理JS代码,使其保持整洁、易读的格式,提高代码质量和团队合作效率。 1. **JavaScript格式化的重要性** - **可读性**:格式化的JavaScript代码更易于...

    JavaScript格式化日期时间的方法和自定义格式化函数示例

    JavaScript日期时间格式化是一个常见的需求,因为默认的时间格式往往不能满足特定的显示需求。以下是关于JavaScript日期时间格式化的知识点详解: 1. JavaScript中的Date对象:Date对象是JavaScript中的一个内置...

Global site tag (gtag.js) - Google Analytics