Javascript 中 Date & 日期常用代码片段

To the one with a hammer, everything looks like a nail. （手中有锤，看什么都像钉）——<芒格>

Date

在 Web开发中，会有很多我们需要与日期/时间值进行交互的实例，我们可能需要对日期和时间值进行各种操作，例如帖子发布后经过的时间，消息发布的时间交付等。
我们不能像向变量提供值那样不断地向程序提供时间/日期的值，我们需要一种机制来跟踪时间/日期的变化。
JavaScript 有 Date 对象，它帮助我们跟踪时间/日期以及与日期和时间值交互的方法。
日期对象基于自 1970 年 1 月 1 日 UTC 以来经过的毫秒数。

在 JavaScript 中日期/时间不是字符串，它表示为 Date 对象，时间和日期没有单独的数据类型，时间和日期都使用 Date 对象表示。
Date 对象有一些内置方法可以帮助从 Date 对象中提取时间和日期部分。

new Date();
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

let time1 = new Date(0);
console.log(time1); // Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)

您可以使用 Date.now() 获取从 1970 年 1 月 1 日 到调用 now()方法的时间之间的毫秒数。

在下面找出 Date() 和 new Date() 之间的区别。

let now = new Date();
console.log(now);                 
// Current Time: Fri May 14 2021 20:29:55 GMT+0530 (India Standard Time)   
console.log(typeof now);           // object 
console.log(now.getMonth());       // 4

let strnow = Date();
console.log(strnow);
// Current Time: Fri May 14 2021 20:29:55 GMT+0530 (India Standard Time) 
console.log(typeof strnow);        //string

console.log(strnow.getMonth());
//Uncaught TypeError: strnow.getMonth is not a function

Date 对象提供了获取日期/时间值和设置日期/时间值的方法，这些方法解释如下。

Date()的 getter方法

getTimezoneOffset(): 返回当前本地时区，本地时区以分钟为单位的 +/- 变化表示。

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getTimezoneOffset());   // -330

getDate(): 返回一个表示日期的整数（1 到 31）。

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getDate());             // 14

getDay(): 返回本地时间的星期几（0 到 6），0 代表星期日，不可更改

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getDay());

getMonth(): 返回表示本地时间月份的整数，月份从0到11。

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMonth());            // 4

getFullYear()：返回本地日期的年份，年份用4位数字表示。

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getFullYear());         // 2021

getHours()：返回当地时间的当前小时。

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getHours());            // 20

getMinutes()：返回当地时间的当前分钟数。

1
2
3

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMinutes());          // 29

getSeconds(): 返回本地时间的当前秒数。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getSeconds());          // 44
9. getMilliseconds()：返回本地时间的毫秒数。
let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMilliseconds());     // 251

// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getFullYear());         // 2021
console.log(now.getMonth());            // 4
console.log(now.getDate());             // 14
console.log(now.getHours());            // 20
console.log(now.getMinutes());          // 29
console.log(now.getSeconds());          // 44
console.log(now.getMilliseconds());     // 251
console.log(now.getDay());              // 5
console.log(now.getTimezoneOffset());   // -330

以上所有方法都基于本地时间，您可以使用这些方法的 UTC 变体来处理基于 UTC 的时间。只需在 get 后添加 UTC，如 getUTCDate()、getUTCDay() 等。

Date() 的 Setter 方法

setDate(): 设置月份中的日期。

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now.setDate(20)
console.log(now);
// Thu May 20 2021 21:28:29 GMT+0530 (India Standard Time)

setMonth()：设置月份。您可以指定月份和日期。

setMonth(month, [date])
//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)       
now = new Date();
now.setMonth(11);
console.log(now);
// Tue Dec 14 2021 21:29:51 GMT+0530 (India Standard Time)

setFullYear()：设置年份。您可以指定日期、月份和年份，日期和月份是可选的。

setFullYear(year, [month], [date])
//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setFullYear(2025);
console.log(now);
// Wed May 14 2025 21:30:20 GMT+0530 (India Standard Time)

setHours()：设置小时。您可以指定可选的分钟、秒和毫秒以及小时。setHours(hour, [min], [sec], [ms])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setHours(23);
console.log(now);
// Fri May 14 2021 23:31:59 GMT+0530 (India Standard Time)

setMinutes()：设置分钟。您可以指定秒和毫秒作为可选参数。

setMinutes(min, [sec], [ms])
//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setMinutes(00);
console.log(now);
// Fri May 14 2021 21:00:58 GMT+0530 (India Standard Time)

setSeconds()：设置秒数。您还可以指定毫秒作为可选参数。

// Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setSeconds(00);
console.log(now);
// Fri May 14 2021 21:33:00 GMT+0530 (India Standard Time)

setMilliseconds(): 设置毫秒。

// Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setMilliseconds(00);
console.log(now);
// Fri May 14 2021 21:34:32 GMT+0530 (India Standard Time)

您可以将字符串转换为 Date 对象，Date 对象的构造函数采用不同格式的字符串。下面给出了一些例子。

const date1 = new Date("Fri, May 14 2021 21:00:00");
console.log(date1);
//Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)

const date2 = new Date("Fri, May 14 2021 21:00:00 UTC");
console.log(date2);
// Sat May 15 2021 02:30:00 GMT+0530 (India Standard Time)
// the output is in Indian standard time not in UTC, 
// i.e. 5:30 is added to 21:00
// so we get 02:30

const date3 = new Date("14 May 2021 21:00:00 UTC+05:30"); 
console.log(date3);
// Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)

const date4 = new Date(2021, 4, 14, 21, 00, 0);
console.log(date4);
// Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)
// Rememnber month starts from zero

const date5 = new Date("2021-05-14T21:00:00Z");
console.log(date5)
// Sat May 15 2021 02:30:00 GMT+0530 (India Standard Time)

Date 对象的输出是 object，我们可以将其转换为字符串格式，Date 对象有内置的方法。

toString() ：返回 Date 对象的字符串表示形式。
toLocalString() ：以本地格式返回 Date 对象的字符串表示形式。
toTimeString()：返回 Date 对象的时间部分。
toLocalTimeString() ：以本地格式返回 Date 对象的时间部分。
toDateString() ：返回 Date 对象的日期部分。
toLocalDateString() ：以本地格式返回 Date 对象的日期部分。

console.log(typeof now.toString(), now.toString());
// string Fri May 14 2021 21:48:19 GMT+0530 (India Standard Time)

console.log(now.toLocaleString());
// 5/14/2021, 9:48:19 PM

console.log(now.toDateString());
// Fri May 14 2021

console.log(now.toLocaleDateString());
// 5/14/2021

console.log(now.toTimeString());
// 21:48:19 GMT+0530 (India Standard Time)

console.log(now.toLocaleTimeString());
// 9:48:19 PM

日期和时间代码片段

1. 昨天日期：

方法一

// Find Yesterday Method 1
function getYesterday(){
    let today = new Date();
    let yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    console.log(`Today: ${today.toDateString()} Yesterday: ${yesterday.toDateString()}`);
}
getYesterday();
//Today: Tue May 18 2021 Yesterday: Mon May 17 2021

方法二

1
2
3

// Find Yesterday Method 2 
const yesterday1 = (today1 => new Date(today1.setDate(today1.getDate() - 1)))(new Date);
console.log(yesterday1);

2. 明天日期：

方法一

// Find Tomorrow
function getTomorrow(){
    let today = new Date();
    let tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    console.log(`Today: ${today.toDateString()} Tomorrow: ${tomorrow.toDateString()}`);
}
getTomorrow();
//Today: Tue May 18 2021 Tomorrow: Wed May 19 2021

方法二

1 2	const tomm1 = (today1 => new Date(today1.setDate(today1.getDate() + 1)))(new Date); console.log(tomm1);

3. 当前日 (周几)

// Print Day
function printWeekday(){
    let names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    console.log(`Today is ${names[new Date().getDay()]}`);
}
printWeekday();
//Today is Tuesday

4. 当前月份

// Print Month
function printMonthName(){
    let names = ['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October',' November', 'December'];
    console.log(`The month is ${names[new Date().getMonth()]}`);
}
printMonthName();
//The month is May

5. 每月第一天和最后一天

// Get first and last day of month
function firstLastDay(year,month){
    let dateFirst = new Date(year,month-1,1);
    let dateLast = new Date(year,month,0);
    console.log(dateFirst.toLocaleDateString(), dateLast.toLocaleDateString());
}
firstLastDay(2021, 1);   // 1/1/2021 1/31/2021
firstLastDay(2021, 2);   // 2/1/2021 2/28/2021
firstLastDay(2021, 5);   // 5/1/2021 5/31/2021

6. 一个月的天数

// Print Number of days in a month             
// Month starts from 0, so (year,month, 0) gives last day of month-1
function getDaysInMonth(year,month){
    let days = new Date(year, month,0).getDate();
    console.log(`Number of days in ${month}/${year}: ${days}`);
}
getDaysInMonth(2021, 1);  // Number of days in 1/2021: 31
getDaysInMonth(2021, 2);  // Number of days in 2/2021: 28
getDaysInMonth(2021, 5);  // Number of days in 5/2021: 31

7.以AM/PM格式打印时间

// Find AM or PM time in hh:mm:ss format
function amOrpm(t){
    let time = t.split(" ")[0].split(':');
    if(parseInt(time[0]) >= 12){
         parseInt(time[0]) === 12 ? 12 : parseInt(time[0] % 12);
         time.push("PM")
    }else{
         time.push("AM")
    }
    console.log(`${time[0]}:${time[1]}:${time[2]} ${time[3]}`);
}
amOrpm(new Date().toTimeString()); // 17:31:07 PM

8. 计算两个日期之间的天数

// Calculate number of days between two dates
function noDates(first, last){
    let difference = Math.ceil((last - first) / (1000*60*60*24));
    console.log(`The number of days between ${first.toLocaleDateString()} and ${last.toLocaleDateString()} is ${Math.abs(difference)} days`);
}

noDates(new Date('2018-1-1'), new Date('2021-05-15'))
//The number of days between 1/1/2018 and 5/15/2021 is 1231 days

9. 计算两个日期之间的月数

// Calculate number of months between two dates
function numMonths(first, last){
    let yearToMonths = [last.getFullYear() - first.getFullYear()] * 12;
    let months  = [yearToMonths + (last.getMonth() + 1)] - (first.getMonth() + 1); 
    console.log(`Number of months between ${first.toLocaleDateString} and 
            ${last.toLocaleDateString} is ${months}`);
}


numMonths(new Date('2018-05-21'), new Date('2020-05-21'));
// Number of months between 5/21/2018 and 5/21/2021 is 36

参考

https://dev.to/kiranrajvjd/javascript-useful-code-snippets-part1-date-and-time-25al

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！