js时间日期格式化封装函数


Posted in Javascript onDecember 02, 2014

js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),来格式化指定时间对象,所以自己就封装了一个小方法,只供大家闲来调侃-.-,有好的建议还望慷慨指荐哦。

用到知识点:

 arguments:该对象代表正在执行的函数和调用它的函数的参数。不可显式创建,虽然有length属性,且能像数组一样以“[]”语法方式取值,但它并不是一个数组。 typeof object :运算符,返回一个用来表示表达式的数据类型的字符串。六种可能: "number," "string," "boolean," "object," "function," 和 "undefined."。 object.constructor:表示创建对象的函数。object必须是对象或函数的名称。基础数据没有该属性。 exec 方法:用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。没有找到匹配,则它返回 null。数组中同类型匹配元素不会重复出现。 str.split(Rex|str):以一个正则对象或子字符串,将一个字符串分割为子字符串,然后将结果作为字符串数组返回。 throw Error('msg'):抛出一个带有Message信息的Error。throw 后面可跟任何表达式。 还有一些for..in用法,三目运算符,substr这些就不讲了,比较简单。

代码片段:

/**

 * ***js时间日期格式化*** <br>

 * <p>

 * 模版字符串采用严谨格式,超出则会抛出异常,且每类格式只可出现一次,如:yyyy-mm-yyyy 格式会抛异常

 * </p>

 * y-年    length: 2/4位 <br>

 * q-季度    length: 1位 <br>

 * M-月    length: 1~2位 <br>

 * d-日    length: 1~2位 <br>

 * H-时    length: 1~2位24小时制,h:12小时制 <br>

 * m-分    length: 1~2位 <br>

 * s-秒    length: 1~2位 <br>

 * S-毫秒 length: 固定1位

 * @param {Date类型对象} date

 * @param {String类型模板字符串} fmt

 * @return 格式化后时间日期字符串

 * @author lyt

 */

function DateFormat(date, fmt){

    if (arguments.length != 2) // 参数个数校验

        throw Error('arguments长度不合法');

    if (!date || (typeof date != 'object') || (d.constructor != Date)) // 参数合法性校验

        throw Error(arguments[0] + ':类型不为Date类型');

    if (/H+/.test(fmt) && /h+/.test(fmt))

        throw Error("小时格式错误,同类型只能连续出现一次!");

    /* 模板参数校验,正则验证方法 */

    var verify = function(Rex ){

        var arr = new RegExp(Rex).exec(fmt); // 获得匹配结果数组

        if (!arr) // 匹配失败返回

            return "";

        if (fmt.split(Rex).length > 2)  // 同一类型间隔出现多次

            throw Error("fmt格式错误:同类型只能连续出现一次!");

        return arr[0];

    };

    /**

     * 提供月、天、时、分、秒通用匹配替换

     * @param {对象o属性key} r

     * @param {r对应正则对象} rex

     **/

    var common = function(r, rex) {

        if(len !=1 && len !=2)

            throw Error("月份格式错误:M只能出现1/2次");

        len == 2 ? fmt=fmt.replace(rex, o[r].length==1 ? "0"+o[r] : o[r]) : fmt=fmt.replace(rex, o[r]);

    }

    var o = { // 数据存储对象

        "y+": date.getFullYear() + "", // 年

        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度

        "M+": date.getMonth() + 1 + "", // 月

        "d+": date.getDate() + "", // 日

        "H+": date.getHours() + "", // 24时

        "h+": date.getHours() + "", // 12时

        "m+": date.getMinutes() + "", // 分

        "s+": date.getSeconds() + "", // 秒

        "S+": date.getMilliseconds() // 毫秒

    }

    for(var r in o) {

        var rex, len, temp;

        rex = new RegExp(r);

        temp = verify(rex); // 匹配所得字符串

        len = temp.length; // 长度

        if(!len || len == 0) 

            continue;

        if(r == "y+") { 

            if(len !=2 && len != 4)

                throw Error("年份格式错误:y只能出现2/4次");

            len == 2 ? fmt=fmt.replace(rex, o[r].substr(2,3)) : fmt=fmt.replace(rex, o[r]);

        } else if(r == "q+") {

            if(len != 1)

                throw Error("季度格式错误:q只能出现1次");

            fmt=fmt.replace(rex, o[r]);

        } else if(r == "h+") {

            if(len !=1 && len !=2)

                throw Error("小时格式错误:h只能出现1/2次");

            var h = (o[r] > 12 ? o[r]-12 : o[r]) + "";

            len == 2 ? fmt=fmt.replace(rex, h.length==1 ? "0"+h : h) : fmt=fmt.replace(rex, h);

        }  else if(r == "S+") {

            if(len != 1) 

                throw Error("毫秒数格式错误:S只能出现1次");

            fmt=fmt.replace(rex, o[r]);

        }else {    // (r=="M+" || r=="d+" || r=="H+" || r=="m+" || r=="s+")

            common(r, rex)

        }  

    }

    return fmt;

}

上几个演示效果,供大家参考:

console.log(DateFormat(new Date(),'yyyy年第q季度M月dd日HH时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat(new Date(),'yyyy年yy第q季度M月dd日HH时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat(new Date(),'yyyy年第q季度M月dd日Hh时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat("我不是时间对象",'yyyy年第q季度M月dd日Hh时m分s秒S毫秒'));

js时间日期格式化封装函数

console.log(DateFormat(new Date(),'yyyy年第q季度MMM月dd日HH时m分s秒S毫秒'));

js时间日期格式化封装函数

其他效果就不一一列举了,感兴趣的可以把代码拷贝下来直接测试就行了,有任何BUG或者有待优化的地方请慷慨指正哦。

以上便是这款非常好用的封装函数的介绍了,是不是很实用呢,小伙伴们可以直接使用到自己的项目中。

Javascript 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
xml和web特殊字符
Apr 28 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 #Javascript
JavaScript基础知识学习笔记
Dec 02 #Javascript
Js 正则表达式知识汇总
Dec 02 #Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 #Javascript
bootstrap改变按钮加载状态
Dec 01 #Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 #Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
Vuex提升学习篇
2018/01/11 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python实现剪切功能
2019/01/23 Python
python 字段拆分详解
2019/12/17 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
社区文化建设方案
2014/05/02 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
element tree树形组件回显数据问题解决
2022/08/14 Javascript