资讯专栏INFORMATION COLUMN

不同浏览器下的时间格式化问题

channg / 2526人阅读

摘要:获得某月的天数获得本季度的开始月份获得今天之前的日期获得今天之后的日期获得本周的开始日期获得本周的结束日期获得上周的开始日期获得上周的结束日期获得本月的开始日期获得本月的结束日期获得本季度的开始日期获得本季度的结束日期

最近项目中遇到一个问题, 提交后的时间后台会返回"2018-01-05T17:32:03"这样的一个时间格式, 在展示的是则只需要展示"2018-01-05". 这种需求应该有很多种方法, 这里我列举两个.

强行截取: substr(0, 10); 任意截取方法

时间格式化: 通过new Date() 方法格式化时间

详细说一个第二种时间格式化的问题
初始时只写了最简单时间格式化方法:

formatDate(date) {
    const _date = date ? new Date(date) : new Date(); // 这里判断是否有传入的时间, 如果没有时间则创建当前时间
    const _y = _date.getFullYear(),
          _m = _date.getMonth() + 1,
          _d = _date.getDate();
          
    if(_m < 10) {
        _m = `0${_m}`
    };
    
    if(_d < 10) {
        _d = `0${_d}`
    };
    
    return +`${_y}-${_m}-${_d}`;
}

这样写是有浏览器兼容性问题的, 就拿"2018-01-05T17:32:03"这个事件来说, 在QQ浏览器下格式化的时间会是"2018-01-06", 解决这个问题在格式化时要替换掉时间中的"T"字符, 当我以为这样就很稳妥时我打开了一下ie浏览器结果发现格式化后的时间都为NAN了, 又去查找症结所在.
在IE和Safari时间转化时间戳时"yyyy-mm-dd"是不能转化为时间戳, 需要"yyyy/mm/dd hh:ii:ss"格式才能正取转化.
下面给出完整代码:

export default class DateChoice {

    /** 
    @agruments config {
        s: "-", // 格式化时间分隔符 默认为"-"
    }
    **/
    constructor(config = {}) {
        this.s = config.s || (config.s === "" ? "" : "-");

        this.now = new Date(); // 当前日期
        this.nowDayOfWeek = this.now.getDay() - 1; // 今天本周的第几天
        this.nowDay = this.now.getDate(); // 当前日
        this.nowMonth = this.now.getMonth() + 1; // 当前月
        this.nowYear = this.now.getYear(); // 当前年
        this.nowYear += (this.nowYear < 2000) ? 1900 : 0; //

        this.lastMonthDate = new Date(); //上月日期
        this.lastMonthDate.setDate(1);
        this.lastMonthDate.setMonth(this.lastMonthDate.getMonth() - 1);
        this.lastYear = this.lastMonthDate.getYear();
        this.lastMonth = this.lastMonthDate.getMonth();
    }

    // 格式化日期:yyyy-MM-dd    @argument date 不传则获取今天日期
    formatDate(date){
        if(typeof date === "string" && date.includes("T")) {
            date = date.replace("T", " ").replace(/-/g, "/"); //注意:指定一个具体的时间转换时间戳,需要yyyy/mm/dd hh:ii:ss格式,yyyy-mm-dd在IE和Safari下是有问题的。
        };
        const D = date ? new Date(date) : new Date();
        
        let myyear = D.getFullYear();
        let mymonth = D.getMonth() + 1;
        let myweekday = D.getDate();
        if (mymonth < 10) {
            mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
            myweekday = "0" + myweekday;
        }
        return (myyear + this.s + mymonth + this.s + myweekday);
    }


    // 获得某月的天数
    getMonthDays(myMonth) {
        const monthStartDate = new Date(this.nowYear, myMonth - 1, 1);
        const monthEndDate = new Date(this.nowYear, myMonth, 1);
        const days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
    }

    // 获得本季度的开始月份
    getQuarterStartMonth() {
        let quarterStartMonth = 1;
        if (this.nowMonth < 4) {
            quarterStartMonth = 1;
        }
        if (3 < this.nowMonth && this.nowMonth < 7) {
            quarterStartMonth = 4;
        }
        if (6 < this.nowMonth && this.nowMonth < 10) {
            quarterStartMonth = 7;
        }
        if (this.nowMonth > 9) {
            quarterStartMonth = 10;
        }
        return quarterStartMonth;
    }

    // 获得今天之前的日期
    getTodayBeforeDate(num) {
        const beforeDate = new Date(this.nowYear, this.nowMonth - 1, this.nowDay - num);
        return this.formatDate(beforeDate);
    }

    // 获得今天之后的日期
    getTodayAfterDate(num) {
        const afterDate = new Date(this.nowYear, this.nowMonth - 1, this.nowDay + num);
        return this.formatDate(afterDate);
    }

    // 获得本周的开始日期
    getWeekStartDate() {
        const weekStartDate = new Date(this.nowYear, this.nowMonth - 1, this.nowDay - this.nowDayOfWeek);
        return this.formatDate(weekStartDate);
    }

    // 获得本周的结束日期
    getWeekEndDate() {
        const weekEndDate = new Date(this.nowYear, this.nowMonth - 1, this.nowDay + (6 - this.nowDayOfWeek));
        return this.formatDate(weekEndDate);
    }

    // 获得上周的开始日期
    getLastWeekStartDate() {
        const weekStartDate = new Date(this.nowYear, this.nowMonth - 1, this.nowDay - this.nowDayOfWeek - 7);
        return this.formatDate(weekStartDate);
    }

    // 获得上周的结束日期
    getLastWeekEndDate() {
        const weekEndDate = new Date(this.nowYear, this.nowMonth - 1, this.nowDay - this.nowDayOfWeek - 1);
        return this.formatDate(weekEndDate);
    }

    // 获得本月的开始日期
    getMonthStartDate() {
        const monthStartDate = new Date(this.nowYear, this.nowMonth - 1, 1);
        return this.formatDate(monthStartDate);
    }

    // 获得本月的结束日期
    getMonthEndDate() {
        const monthEndDate = new Date(this.nowYear, this.nowMonth - 1, this.getMonthDays(this.nowMonth));
        return this.formatDate(monthEndDate);
    }

    // 获得本季度的开始日期
    getQuarterStartDate() {
        const quarterStartDate = new Date(this.nowYear, this.getQuarterStartMonth() - 1, 1);
        return this.formatDate(quarterStartDate);
    }

    // 获得本季度的结束日期
    getQuarterEndDate() {
        const quarterEndMonth = this.getQuarterStartMonth() + 2;
        const quarterStartDate = new Date(this.nowYear, quarterEndMonth - 1, this.getMonthDays(quarterEndMonth));
        return this.formatDate(quarterStartDate);
    }

}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90708.html

相关文章

  • 览器多个标签页之间的通信之cookie篇

    摘要:如何解决浏览器多个标签页之间的通信使用使用使用和概念简单理解就是一种可以让服务器在客户端的硬盘或者内存里面存储少量数据或者说从客户端硬盘读取数据的技术的存放形式的信息是以名值形式保存一个名值仅仅是一条信息保存位置是,隐藏文件的功能多 如何解决浏览器多个标签页之间的通信? 使用cookie 使用web worker 使用localeStorage和sessionStorage co...

    feng409 评论0 收藏0
  • Flask Web Development —— 模板(下)

    摘要:如果路由重组,模板中的链接将被打断而变得无法访问。静态文件应用程序不仅仅是由代码和模板组成。当服务器收到来自之前示例的,它会产生一个响应包含的文件内容。一个优雅的解决方案是允许服务器只发送时间给浏览器,由浏览器转为当地时间并渲染。 4、链接 任何应用程序都有多个路由,必然需要包含链接来连接不同的页面,例如导航栏。 在模板中,对于简单的路由直接写URLs做链接是非常琐碎麻烦的,而给带...

    raoyi 评论0 收藏0
  • 前端面试--性能优化

    1. 知识体系 1.1从输入 URL 到页面加载完成,发生了什么? 首先我们需要通过 DNS(域名解析系统)将 URL 解析为对应的 IP 地址,然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接,随后我们向服务端抛出我们的 HTTP 请求,服务端处理完我们的请求之后,把目标数据放在 HTTP 响应里返回给客户端,拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕,页面便呈现给了...

    XiNGRZ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<