Javascript Date解析和格式化

日期处理技巧

最新推荐文章于 2024-01-30 13:47:48 发布

最新推荐文章于 2024-01-30 13:47:48 发布 · 286 阅读

文章标签：

#Javascript #Date #parse #format #Array Each #ViewUI

Javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种日期处理的方法，包括日期格式化和日期字符串解析。通过JavaScript扩展提供了实用的工具，帮助开发者更方便地进行日期操作。

　　最近由于项目需要对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 中提供的时间设置说明。