js比較兩個日期與時間的大小以及日期對象的常用用法

需求背景:

現在多數 APPhome 頁面會有一些日常問候語,比如:早上好!/ 上午好! / 晚上好!/ 六一兒童節快樂,等等之類的。一般類似于這種需求,后臺都會返回一個數組,每個數組里包含一個對象,每個對象又有起始時間(可能就是一個時間的字符串,如:01:00:00)與結束時間,以及一個日期來告訴客戶端是否是節日。

思路:

針對上面這種需求,偽代碼如下:

  • 判斷是否是節日?如果是節日就顯示節日問候語并直接 return,如果不是就繼續下一步顯示日常問候語;
  • 日常問候語,一般分三個時間段:
    • 05:00:00 -- 11:59:59 早上
    • 12:00:00 -- 16:59:59 下午
    • 17:00:00 -- 04:59:59 晚上
  • 觀察時間范圍,可獲取當前時間 currentTime ,找出 currentTime 在時間范圍的那個對象,然后獲取該對象的問候語。可是發現晚上這個時間,結束時間是小于起始時間,所以還要加一個條件: currentTime 大于晚上的起始時間,而且起始時間大于結束時間。
  • 思路大概就是這樣,現在通過代碼來演示:

代碼:

  • test() 一個測試方法,調用封裝的方法(可以寫在工具類中)

test() {
    // compare two date
    let currentDate = new Date().toISOString();
    let startdate = "2021-05-04T00:00:00";
    let enddate = "2021-05-04T23:59:59";
    let compareStartDate= this. compDateTime(startdate,currentDate,'s');
    let compareEndDate = this. compDateTime(currentDate,enddate,'s');
    console.log('compareStartDate:'+compareStartDate + '--compareEndDate:'+compareEndDate);
    //值為正,說明第二個時間大于第一個時間,compareStartDate:57195--compareEndDate:403, currentDate為2021-05-04T23:50:50

    // compare two time 
    let starttime = "05:00:00";
    let endtime = "11:59:59";
    let currentHours = this.formatDateTime(new Date(),'hours');
    let compStarttime = this.compareHoursTime(starttime, currentHours);
    let compEndtime = this.compareHoursTime(currentHours, endtime);
    console.log('compStarttime:'+compStarttime + '--compEndtime:'+compEndtime);
    //compStarttime:false--compEndtime:true,currentDate為2021-05-04T23:50:50

}

常用方法封裝:

  • 常用日期格式化方式:
formatDateTime(date: any, pattern: string, lang?: string): string | null {
    let isEN = (lang || moment.locale()) === 'en';

    if (pattern === 'iso8601') {
        pattern = 'YYYY-MM-DDTHH:mm:ssZ';
    } else if (pattern === 'shortDate') {
        pattern = 'DD/MM/YYYY';
    } else if (pattern === 'longDate') {
        pattern = isEN ? 'DD MMM YYYY' : 'DD/MM/YYYY';
    } else if (pattern == 'wholeDate') {
        pattern = isEN ? 'DD MMMM YYYY' : 'YYYY年MM月DD日';
    } else if (pattern == 'datetime') {
        pattern = isEN ? 'DD MMM YYYY HH:mm:ss z' : 'z YYYY年MM月DD日 HH:mm:ss';
    } else if (pattern == 'datetimeWithoutSecond') {
        pattern = isEN ? 'DD MMM YYYY HH:mm z' : 'z YYYY年MM月DD日 HH:mm';
    } else if (pattern == 'simpleDatetime') {
        pattern = 'DD MMM YYYY HH:mm z';
    } else if (pattern == 'time') {
        pattern = 'HH:mm';
    } else if (pattern == "date") {
        pattern = isEN ? 'DD MMM YYYY' : 'YYYY年MM月DD日';
    } else if (pattern == "yearMonth") {
        pattern = isEN ? 'MMM YYYY' : 'YYYY年MM月';
    } else if (pattern == "hours") {
        pattern = 'HH:mm:ss';
    } 
    
    if(lang) {
        return moment.tz(date, 'Asia/Shen_Zhen').locale(lang).format(pattern).replace('SZT', '深圳時間');
    } else {
        return moment.tz(date, 'Asia/Shen_Zhen').format(pattern).replace('SZT', '深圳時間');
    }
}
  • 比較兩個日期大小的方法, 第二個日期大于第一個日期的話,就返回正值,否則返回負值:
compDateTime(fromDate: any = new Date(), toDate: any = new Date(), unit: string): number {
    let timezone = new Date().getTimezoneOffset();
    console.log('timezone:'+timezone);
    const fromDateMoment = moment.tz(fromDate, 'Asia/Shen_Zhen');
    const toDateMoment = moment.tz(toDate, 'Asia/Shen_Zhen');
    return toDateMoment.diff(fromDateMoment, unit);
}
  • 比較兩個時間大小方法,第一個時間大于第二個時間的話,就返回 true,否則返回 false
compareHoursTime(oneHours: any, anotherHours: any) {
    if (oneHours && anotherHours){
        let date = new Date();
        let one = date.setHours(oneHours.split(':')[0],oneHours.split(':')[1],oneHours.split(':')[2]);
        let another = date.setHours(anotherHours.split(':')[0],anotherHours.split(':')[1],anotherHours.split(':')[2]);
        return one > another;
    } 
    
}
  • 傳入一個年月日加上時間的日期轉化為,ISOString 類似的日期格式:
convertDateTime(date: Date, time: Date): Date {
    return moment(moment(date).format('YYYYMMDD') + 'T' + moment(time).format('HHmmss')).toDate();
}
  • 字符串格式日期轉化為 Date 格式:
parseDateTimeFromDateString(dateStr: string, pattern: string): Date {
    if (pattern === 'iso8601') {
        pattern = 'YYYY-MM-DDTHH:mm:ssZ';
    } else if (pattern === 'shortDate') {
        pattern = 'DD/MM/YYYY';
    } else if (pattern === 'longDate') {
        pattern = 'DD MMM YYYY';
    } else if (pattern == 'datetime') {
     pattern = 'DD MMM YYYY HH:mm:ss';
    }

    let currentLocale = moment.locale();
    moment.locale('en');
    let result = moment.tz(dateStr, pattern, TIMEZONE).toDate()
    moment.locale(currentLocale);
    
    return result;
}
  • 判斷是否是今天:
isToday(date: Date): boolean {
    const dtFormat = 'shortDate';

    let now = this.formatDateTime(new Date(), dtFormat);
    let compare = this.formatDateTime(date, dtFormat);

    return now.localeCompare(compare) === 0;
}
  • 日期數組中,找出最小日期的元素:
minDate(list: Date[]): Date | null {
    if(list.length === 0) return null;
    return list.reduce((minDate, date) => date.getTime() < minDate.getTime() ? date : minDate, list[0]);
}
  • 日期數組中,找出最大日期的元素:
maxDate(list: Date[]): Date | null {
    if(list.length === 0) return null;
    return list.reduce((maxDate, date) => date.getTime() > maxDate.getTime() ? date : maxDate, list[0]);
}

結語

以上就是Date 對象的簡單總結,如果講述有什么錯誤,歡迎留言評論,互相交流學習,碼子碼圖不易,轉載請注明出處,謝謝。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容