JavaScript 中Date对象的格式化代码方法汇总


Posted in Javascript onSeptember 06, 2017

 JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面说说我总结的JavaScript时间格式化方法。

很多时候,我们可以利用JavaScript中Date对象的内置方法来格式化,如:

var d = new Date();
console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间)
console.log(d.toDateString()); // 日期字符串,输出:Mon Nov 04 2013
console.log(d.toGMTString()); // 格林威治时间,输出:Mon, 04 Nov 2013 14:03:05 GMT
console.log(d.toISOString()); // 国际标准组织(ISO)格式,输出:2013-11-04T14:03:05.420Z
console.log(d.toJSON()); // 输出:2013-11-04T14:03:05.420Z
console.log(d.toLocaleDateString()); // 转换为本地日期格式,视环境而定,输出:2013年11月4日
console.log(d.toLocaleString()); // 转换为本地日期和时间格式,视环境而定,输出:2013年11月4日 下午10:03:05
console.log(d.toLocaleTimeString()); // 转换为本地时间格式,视环境而定,输出:下午10:03:05
console.log(d.toString()); // 转换为字符串,输出:Mon Nov 04 2013 22:03:05 GMT+0800 (中国标准时间)
console.log(d.toTimeString()); // 转换为时间字符串,输出:22:03:05 GMT+0800 (中国标准时间)
console.log(d.toUTCString()); // 转换为世界时间,输出:Mon, 04 Nov 2013 14:03:05 GMT

如果上面的方法不能满足我们的要求,也可以自定义函数来格式化时间,如:

 方法一:

// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")   ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
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;
}

调用:

var time1 = new Date().Format(“yyyy-MM-dd”); 
var time2 = new Date().Format(“yyyy-MM-dd HH:mm:ss”);

方法二:

<script language="javascript" type="text/javascript">
<!-- /** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: * (new
Date()).pattern("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.pattern=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
"H+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
var week = {
"0" : "/u65e5",
"1" : "/u4e00",
"2" : "/u4e8c",
"3" : "/u4e09",
"4" : "/u56db",
"5" : "/u4e94",
"6" : "/u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
}
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;
}
var date = new Date();
window.alert(date.pattern("yyyy-MM-dd hh:mm:ss"));
// -->
</script>

方法三:

Date.prototype.format = function (mask) {
var d = this;
var zeroize = function (value, length) {
if (!length) length = 2;
value = String(value);
for (var i = 0, zeros = ''; i < (length - value.length); i++) {
zeros += '0';
}
return zeros + value;
};
return mask.replace(/"[^"]*"|'[^']*'|/b ( ? : d {
1, 4
} | m {
1, 4
} | yy( ? : yy) ? | ([hHMstT]) / 1 ? | [lLZ]) / b / g, function ($0) {
switch ($0) {
case 'd':
return d.getDate();
case 'dd':
return zeroize(d.getDate());
case 'ddd':
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
case 'dddd':
return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
case 'M':
return d.getMonth() + 1;
case 'MM':
return zeroize(d.getMonth() + 1);
case 'MMM':
return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
case 'MMMM':
return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
case 'yy':
return String(d.getFullYear()).substr(2);
case 'yyyy':
return d.getFullYear();
case 'h':
return d.getHours() % 12 || 12;
case 'hh':
return zeroize(d.getHours() % 12 || 12);
case 'H':
return d.getHours();
case 'HH':
return zeroize(d.getHours());
case 'm':
return d.getMinutes();
case 'mm':
return zeroize(d.getMinutes());
case 's':
return d.getSeconds();
case 'ss':
return zeroize(d.getSeconds());
case 'l':
return zeroize(d.getMilliseconds(), 3);
case 'L':
var m = d.getMilliseconds();
if (m > 99) m = Math.round(m / 10);
return zeroize(m);
case 'tt':
return d.getHours() < 12 ? 'am' : 'pm';
case 'TT':
return d.getHours() < 12 ? 'AM' : 'PM';
case 'Z':
return d.toUTCString().match(/[A-Z]+$/);
// Return quoted strings with the surrounding quotes removed
default:
return $0.substr(1, $0.length - 2);
}
});
};

总结

以上所述是小编给大家介绍的JavaScript 中Date对象的格式化代码方法汇总,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
Vue的百度地图插件尝试使用
Sep 06 #Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 #Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 #Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
详谈js原型继承的一些问题
Sep 06 #Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 #Javascript
You might like
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
python实现批量解析邮件并下载附件
2018/06/19 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python打印不合法的文件名
2020/07/31 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
技校毕业生自荐书
2014/05/23 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
学雷锋的心得体会
2014/09/04 职场文书
学生安全责任协议书
2016/03/22 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript