操作new Date对象的方法,让它无处遁形

1,482 阅读4分钟

前言

大家好,我是青年野味,在日常的开发过程中,我们可能会对一些日期数据进行各式各样的操作,譬如说计算本季度、某个时间段内的天数等等需求。今天就给大家分享关于我自己总结的操作日期数据的方法,喜欢的可以点赞+收藏。

创建 Date 对象

        var date = new Date()

默认情况下,JavaScript根据使用的浏览器的时区并用当前日期和时间创建新的日期对象,并将日期显示为全文本字符串。

日期获取方法

  • getFullYear()获取完整的年份(4位,1970)
  • getMonth(): 获取月份(0-11,0代表1月,用的时候记得加上1)
  • getDate(): 获取日(1-31)
  • getDay(): 获取周名(0-6)
  • getTime(): 获取时间(从1970.1.1开始的毫秒数),返回时间戳的格式
  • getHours(): 获取小时数(0-23)
  • getMinutes(): 获取分钟数(0-59)
  • getSeconds(): 获取秒数(0-59)
  • getMilliseconds(): 获取毫秒(0-999)
        var date = new Date()
        
        date.getFullYear(); // 2021
        date.getMonth()+1; // 12
        date.getDate(); // 8
        date.getDay(); // 3
        date.getTime(); // 1638928516753
        date.getHours(); // 9
        date.getMinutes(); // 56
        date.getSeconds(); // 31
        date.getMilliseconds(); // 243

日期设置方法

  • setFullYear(): 设置年(可选月和日)
  • setMonth(): 设置月(0-11)
  • setDate(): 以数值(1-31)设置日
  • setHours(): 设置小时(0-23)
  • setMinutes(): 设置分(0-59)
  • setSeconds(): 设置秒(0-59)
  • setMilliseconds(): 设置毫秒(0-999)
  • setTime(): 设置时间(从 1970 年 1 月 1 日至今的毫秒数)
        var date = new Date()
        date.setFullYear(2020) //console.log(date.getFullYear())输出的就是2020
        date.setMonth(10) //console.log(date.getMonth())输出的就是10
        date.setDate(1) //console.log(date.getDate())输出的就是1
        date.setHours(11) //console.log(date.getHours())输出的就是11
        date.setMinutes(24) //console.log(date.getMinutes())输出的就是24
        date.setSeconds(24) //console.log(date.getSeconds())输出的就是24
        date.setMilliseconds(111) //console.log(date.getSeconds())输出的就是11
        date.setTime() //设置时间(从 1970 年 1 月 1 日至今的毫秒数)

以上就是关于一些对new Date对象的认识了,下面就让我们来写一下日常开发中使用到的方法吧

class yw_Date extends Date {
    constructor(dateStr) {
        super(dateStr)
        this.dateStr = dateStr
        this.nowDate = ""
        this.initDate(dateStr)
    }
    initDate(dateStr) {
        if (typeof dateStr === "string") {
            if (dateStr.indexOf(".") > -1) {
                // 有些日期接口返回带有.0。
                dateStr = dateStr.substring(0, dateStr.indexOf("."));
            }
            // 解决IOS上无法从dateStr parse 到Date类型问题
            dateStr = dateStr.replace(/\-/g, "/");
        }
        this.nowDate = dateStr ? new Date(dateStr) : new Date()
        this.nowDayOfWeek = this.nowDate.getDay();
        this.nowDay = this.nowDate.getDate();
        this.nowMonth = this.nowDate.getMonth();
        var nowYear = this.nowDate.getFullYear();
        nowYear += (nowYear < 2000) ? 1900 : 0;
        this.nowYear = nowYear

        // return dateStr ? new Date(dateStr) : new Date()
    }
    //获取指定日期的前一天/后一天,其他的设置方法跟着类似的,只不过函数名换一下
    getNextDate(options) {
        var {
            date,
            api,
            num = 0,
            type
        } = options
        switch (api) {
            case "setFullYear": {
                this.initDate(date)
                this.nowDate.setFullYear(this.nowDate.getFullYear() + num);
                return this.exportType(type)
            }
            break;
        case "setMonth": {
            this.initDate(date)
            this.nowDate.setMonth(this.nowDate.getMonth() + num);
            return this.exportType(type)
        }
        break;
        case "setDate": {
            this.initDate(date)
            this.nowDate.setDate(this.nowDate.getDate() + num);
            return this.exportType(type)
        }
        break;
        case "setHours": {
            this.initDate(date)
            this.nowDate.setHours(this.nowDate.getHours() + num);
            return this.exportType(type)
        }
        break;
        case "setMinutes": {
            this.initDate(date)
            this.nowDate.setMinutes(this.nowDate.getMinutes() + num);
            return this.exportType(type)
        }
        case "setSeconds": {
            this.initDate(date)
            this.nowDate.setSeconds(this.nowDate.getSeconds() + num);
            return this.exportType(type)
        }
        case "setMilliseconds": {
            this.initDate(date)
            this.nowDate.setMilliseconds(this.nowDate.getMilliseconds() + num);
            return this.exportType(type)
        }
        break;
        case "setTime": {
            this.initDate(date)
            this.nowDate.setTime(this.nowDate.getTime() + num);
            return this.exportType(type)
        }
        break;
        default:
            throw new TypeError("请传入api类型")
            break;
        }

    };
    //转为时间戳
    getTimestamp(type) {
        var newDate = this.nowDate
        switch (type) {
            case "getTime": {
                return newDate.getTime()
            }
            break;
        case "valueOf": {
            return newDate.valueOf()
        }
        break;
        case "parse": {
            return Date.parse(newDate);
        }
        default:
            return newDate.getTime()
            break;
        }
    }
    //导出类型
    exportType(type = "yyyy-MM-dd") {
        // console.log(this.__proto__)
        // console.log("yyyy-MM-dd",this.nowDate.getMonth())
        const o = {
            // "y+":this.nowDate.getFullYear(),//年份
            // "Y+":this.nowDate.getFullYear(),//年份
            "M+": this.nowDate.getMonth() + 1, //月份
            "d+": this.nowDate.getDate(), //日
            "h+": this.nowDate.getHours(), //小时
            "m+": this.nowDate.getMinutes(), //分
            "s+": this.nowDate.getSeconds(), //秒
            "q+": Math.floor((this.nowDate.getMonth() + 3) / 3), //季度
            "S": this.nowDate.getMilliseconds() //毫秒
        };
        if (/((y+)|(Y+))/.test(type)) type = type.replace(RegExp.$1, (this.nowDate.getFullYear() + "")
            .substr(4 - RegExp.$1
                .length));
        for (let k in o)
            if (new RegExp("(" + k + ")").test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length ==
                    1) ?
                (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return type;
    }
    //获得某月的天数
    getMonthDays(myMonth = this.nowMonth) {
        var monthStartDate = new Date(this.nowDate.getFullYear(), myMonth, 1);
        var monthEndDate = new Date(this.nowDate.getFullYear(), myMonth + 1, 1);
        var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
    }
    //获得本季度的开始月份  
    getQuarterStartMonth() {
        var quarterStartMonth = 0;
        if (this.nowMonth < 3) {
            quarterStartMonth = 0;
        }
        if (2 < this.nowMonth && this.nowMonth < 6) {
            quarterStartMonth = 3;
        }
        if (5 < this.nowMonth && this.nowMonth < 9) {
            quarterStartMonth = 6;
        }
        if (this.nowMonth > 8) {
            quarterStartMonth = 9;
        }
        return quarterStartMonth;
    }

    //获得上季度的开始月份     
    getLastQuarterStartMonth() {
        var quarterStartMonth = 0;
        if (this.nowMonth < 3) {
            quarterStartMonth = 9;
        }
        if (2 < this.nowMonth && this.nowMonth < 6) {
            quarterStartMonth = 0;
        }
        if (5 < this.nowMonth && this.nowMonth < 9) {
            quarterStartMonth = 3;
        }
        if (this.nowMonth > 8) {
            quarterStartMonth = 6;
        }
        return quarterStartMonth;
    }

    //获得下季度的开始月份     
    getNextQuarterStartMonth() {
        var quarterStartMonth = 0;
        if (this.nowMonth < 3) {
            quarterStartMonth = 3;
        }
        if (2 < this.nowMonth && this.nowMonth < 6) {
            quarterStartMonth = 6;
        }
        if (5 < this.nowMonth && this.nowMonth < 9) {
            quarterStartMonth = 9;
        }
        if (this.nowMonth > 8) {
            quarterStartMonth = 0;
        }
        return quarterStartMonth;
    }

    initStr(quarterDate) {
        this.initDate(quarterDate)
        // console.log(this)
        var str = this.exportType()
        this.initDate(this.dateStr)
        return str;
    }
    //获得本季度的开始日期     
    getQuarterStartDate() {
        var quarterStartDate = new Date(this.nowYear, this.getQuarterStartMonth(), 1);
        return this.initStr(quarterStartDate);
    }

    //获得本季度的结束日期     
    getQuarterEndDate() {
        var quarterEndMonth = this.getQuarterStartMonth() + 2;
        var quarterEndDate = new Date(this.nowYear, quarterEndMonth, this.getMonthDays(quarterEndMonth));
        return this.initStr(quarterEndDate);
    }

    //获得上季度的开始日期     
    getLastQuarterStartDate() {
        var quarterStartDate;
        if (this.nowMonth < 6) {
            quarterStartDate = new Date(this.nowYear - 1, this.getLastQuarterStartMonth(), 1);
        } else {
            quarterStartDate = new Date(this.nowYear, this.getLastQuarterStartMonth(), 1);
        }
        return this.initStr(quarterStartDate);
    }

    //获得上季度的结束日期     
    getLastQuarterEndDate() {
        var quarterEndMonth = this.getLastQuarterStartMonth() + 2;
        var quarterEndDate;
        if (this.nowMonth < 6) {
            quarterEndDate = new Date(this.nowYear - 1, quarterEndMonth, this.getMonthDays(
                quarterEndMonth));
        } else {
            quarterEndDate = new Date(this.nowYear, quarterEndMonth, this.getMonthDays(quarterEndMonth));
        }
        return this.initStr(quarterEndDate);
    }

    //获得下季度的开始日期     
    getNextQuarterStartDate() {
        var quarterStartDate;
        if (this.nowMonth > 8) {
            quarterStartDate = new Date(this.nowYear + 1, this.getNextQuarterStartMonth(), 1);
        } else {
            quarterStartDate = new Date(this.nowYear, this.getNextQuarterStartMonth(), 1);
        }
        return this.initStr(quarterStartDate);
    }

    //获得下季度的结束日期     
    getNextQuarterEndDate() {
        var quarterEndMonth = this.getNextQuarterStartMonth() + 2;
        var quarterEndDate;
        if (this.nowMonth > 8) {
            quarterEndDate = new Date(this.nowYear + 1, quarterEndMonth, this.getMonthDays(
                quarterEndMonth));
        } else {
            quarterEndDate = new Date(this.nowYear, quarterEndMonth, this.getMonthDays(quarterEndMonth));
        }
        return this.initStr(quarterEndDate)
    }

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

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

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

    //获得上周的结束日期     
    getLastWeekEndDate() {
        var weekEndDate = new Date(this.nowYear, this.nowMonth, this.nowDay + (6 - this.nowDayOfWeek) - 7);
        return this.initStr(weekEndDate);
    }

    //获得下周的开始日期     
    getNextWeekStartDate() {
        var weekStartDate = new Date(this.nowYear, this.nowMonth, this.nowDay - this.nowDayOfWeek + 7);
        return this.initStr(weekStartDate);
    }

    //获得下周的结束日期     
    getNextWeekEndDate() {
        var weekEndDate = new Date(this.nowYear, this.nowMonth, this.nowDay + (6 - this.nowDayOfWeek) + 7);
        return this.initStr(weekEndDate);
    }

    //计算倒计时
    countDown(options) {
        if (!options) return;
        var {
            nextDate,
            nowDate = this.nowDate
        } = options
        console.log(nextDate, nowDate)
        if (!nextDate) return;

        //数字转换成字符串,非数字和字符串的return
        if (typeof nextDate == "object") return

        if (typeof nextDate !== "string" && typeof nextDate == "number") {
            nextDate = nextDate.toString();
        }

        //校验是否是非时间戳传入
        if (!isNaN(new Date(nextDate).getTime())) {
            nextDate = new Date(nextDate).getTime().toString();
        }

        //传入时间是否以毫秒为单位
        nextDate = nextDate.padEnd(13, "0")

        var t = parseInt(Number(nextDate) - new Date(nowDate).getTime()) / 1000;


        if (parseInt(t) > 60) {
            var second = parseInt(t) % 60;
            var min = parseInt(t / 60);
            if (second < 10) {
                second = "0" + second;
            }
            if (min < 10) {
                min = "0" + min;
            }
            nextDate = min + ":" + second;
            if (min > 60) {
                min = parseInt(t / 60) % 60;
                var hour = parseInt(parseInt(t / 60) / 60);
                nextDate = hour + ":" + min + ":" + second;
                if (hour > 24) {
                    hour = parseInt(parseInt(t / 60) / 60) % 24;
                    var day = parseInt(parseInt(parseInt(t / 60) / 60) / 24);
                    nextDate = day + "天";
                }
            }
        } else if (0 < parseInt(t) && parseInt(t) < 60) {
            nextDate = parseInt(t) + "秒"
        } else {
            nextDate = "已超时"
        }

        return nextDate
    }

    //获取某时区的时间
    getCurrentZoneTime(zone, date) {
        if (!zone) return this.nowDate
        if (date) {
            this.initDate(date)
        }
        date = this.nowDate
        this.initDate(this.dateStr)
        var timezone = zone; //目标时区
        var offset_GMT = date.getTimezoneOffset(); // 本地时间和格林威治的时间差,单位为分钟
        var nowDate = date.getTime(); // 本地时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数
        var targetDate = new yw_Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000); //当前时区的时间
        return targetDate
    }
}

以上就是我总结的一些关于日常开发过程中操作日期数据的一些方法了。

拓展

new Date对象其实还有属性和很多的方法,具体可以了解JavaScript Date 对象

总结

这个yw_Date类希望能够帮助到大家。不积跬步,无以至千里.不积小流,无以成江海。希望我们能一起行千里、成江海。