Крайното ръководство за JavaScript Date и Moment.js

Програмиране

Добре дошли в нашето крайно ръководство за JavaScript Dateобекта и Moment.js. Този урок ще ви научи на всичко, което трябва да знаете за работата с дати и часове във вашите проекти.

Как да създадете Dateобект

Вземете текущата дата и час

const now = new Date(); // Mon Aug 10 2019 12:58:21 GMT-0400 (Eastern Daylight Time)

Вземете дата и час с индивидуални стойности

const specifiedDate = new Date(2019, 4, 29, 15, 0, 0, 0); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Синтаксисът е Date(year, month, day, hour, minute, second, millisecond).

Имайте предвид, че месеците са с нулев индекс, започвайки с януари в 0 и завършващи с декември в 11.

Вземете дата и час от клеймо за време

const unixEpoch = new Date(0);

Това представлява времето в четвъртък, 1 януари 1970 г. (UTC), или времето на Unix Epoch. Unix Epoch е важен, защото това е, което JavaScript, Python, PHP и други езици и системи използват вътрешно за изчисляване на текущото време.

new Date(ms) връща датата на епохата плюс броя на милисекундите, които предавате. За един ден има 86 400 000 милисекунди, така че:

const dayAfterEpoch = new Date(86400000);

ще се върне в петък, 2 януари 1970 г. (UTC).

Вземете дата и час от низ

const stringDate = new Date('May 29, 2019 15:00:00'); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Получаването на датата по този начин е много гъвкаво. Всички примери по-долу връщат валидни Dateобекти:

new Date('2019-06') // June 1st, 2019 00:00:00 new Date('2019-06-16') // June 16th, 2019 new Date('2019') // January 1st, 2019 00:00:00 new Date('JUNE 16, 2019') new Date('6/23/2019')

Можете също да използвате Date.parse()метода, за да върнете броя на милисекундите от епохата (1 януари 1970 г.):

Date.parse('1970-01-02') // 86400000 Date.parse('6/16/2019') // 1560610800000

Задаване на часова зона

При предаване на низ с дата без задаване на часова зона, JavaScript приема, че датата / часът са в UTC, преди да го конвертирате в часовата зона на вашия браузър:

const exactBirthdate = new Date('6/13/2018 06:27:00'); console.log(exactBirthdate) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Това може да доведе до грешки, когато датата на връщане е изключена с много часове. За да избегнете това, преминете в часова зона заедно с низа:

const exactBirthdate = new Date('6/13/2018 06:27:00 GMT-1000'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time) /* These formats also work: new Date('6/13/2018 06:27:00 GMT-10:00'); new Date('6/13/2018 06:27:00 -1000'); new Date('6/13/2018 06:27:00 -10:00'); */

Можете също така да предадете някои, но не всички кодове на часови зони:

const exactBirthdate = new Date('6/13/2018 06:27:00 PDT'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

Date Обектни методи

Често няма да ви трябва цялата дата, а само част от нея, като деня, седмицата или месеца. За щастие има редица методи за това:

const birthday = new Date('6/13/2018 06:27:39'); birthday.getMonth() // 5 (0 is January) birthday.getDate() // 13 birthday.getDay() // 3 (0 is Sunday) birthday.getFullYear() // 2018 birthday.getTime() // 1528838859000 (milliseconds since the Unix Epoch) birthday.getHours() // 6 birthday.getMinutes() // 27 birthday.getSeconds() // 39 birthday.getTimezoneOffset() // -540 (time zone offset in minutes based on your browser's location)

Направете работата с дати по-лесна с Moment.js

Получаването на правилни дати и часове не е малка задача. Изглежда, че всяка държава има различен начин за форматиране на датите и отчитането на различни часови зони и лятно часово време / лятното часово време отнема, много време. Това е мястото, където Moment.js блести - прави разбор, форматиране и показване на дати лек.

За да започнете да използвате Moment.js, инсталирайте го чрез мениджър на пакети като npmили го добавете към вашия сайт чрез CDN. Вижте документацията на Moment.js за повече подробности.

Вземете текущата дата и час с Moment.js

const now = moment();

Това връща обект с датата и часа въз основа на местоположението на вашия браузър, заедно с друга информация за локала. Той е подобен на собствения JavaScript new Date().

Вземете дата и час от клеймо с Moment.js

Подобно на new Date(ms), можете да предадете броя на милисекундите от епохата на moment():

const dayAfterEpoch = moment(86400000);

Ако искате да получите дата с помощта на Unix времева марка за секунди, можете да използвате unix()метода:

const dayAfterEpoch = moment.unix(86400);

Вземете дата и час от низ с Moment.js

Анализирането на дата от низ с Moment.js е лесно и библиотеката приема низове във формат ISO 8601 или RFC 2822 Date Time, заедно с всеки низ, приет от JavaScript Dateобекта.

Низовете ISO 8601 се препоръчват, тъй като това е широко приет формат. Ето няколко примера:

moment('2019-04-21'); moment('2019-04-21T05:30'); moment('2019-04-21 05:30'); moment('20190421'); moment('20190421T0530');

Задаване на часова зона с Moment.js

Up until now, we have been using Moment.js in local mode, meaning that any input is assumed to be a local date or time. This is similar to how the native JavaScript Date object works:

const exactBirthMoment = moment('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

However, to set a time zone, you must first get the Moment object in UTC mode:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 15:27:00 GMT+0900 (Korean Standard Time)

Then you can adjust for the difference in time zones with the utcOffset() method:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00').utcOffset('+10:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

You can also set the UTC offset as a number or a string:

moment.utc().utcOffset(10) // Number of hours offset moment.utc().utcOffset(600) // Number of minutes offset moment.utc().utcOffset('+10:00') // Number of hours offset as a string

To use named time zones (America/Los_Angeles) or time zone codes (PDT) with Moment objects, check out the Moment Timezone library.

Format the date and time with Moment.js

One of the major strengths that Moment.js has over native JavaScript Date objects is how easy it is to format the output date and time. Just chain the  format() method to a Moment date object and pass it a format string as a parameter:

moment().format('MM-DD-YY'); // "08-13-19" moment().format('MM-DD-YYYY'); // "08-13-2019" moment().format('MM/DD/YYYY'); // "08/13/2019" moment().format('MMM Do, YYYY') // "Aug 13th, 2019" moment().format('ddd MMMM Do, YYYY HH:mm:ss') // "Tues August 13th, 2019 19:29:20" moment().format('dddd, MMMM Do, YYYY -- hh:mm:ss A') // "Tuesday, August 13th, 2019 -- 07:31:02 PM"

Here's a table with some common formatting tokens:

InputOutputDescription
YYYY20194 digit year
YY192 digit year
MMMMAugustFull month name
MMMAugAbbreviated month name
MM082 digit month
M81 digit month
DDD225Day of the year
DD13Day of the month
Do13thDay of the month with ordinal
ddddWednesdayFull day name
dddWedAbbreviated day name
HH17Hours in 24 hour time
hh05Hours in 12 hour time
mm32Minutes
ss19Seconds
aam / pmAnte or post meridiem
AAM / PMCapitalized ante or post meridiem
ZZ+0900Timezone offset from UTC
X1410715640.579Unix timestamp in seconds
XX1410715640579Unix timestamp in milliseconds

See the Moment.js docs for more formatting tokens.

Working with JavaScript Date objects and Moment.js doesn't have to be time consuming. Now you should know more than enough to get started with both.