Bine ați venit la ghidul nostru final privind JavaScript Date obiect și Moment.js. Acest tutorial vă va învăța tot ce trebuie să știți despre lucrul cu datele și orele în proiectele dvs.

Cum se creează un Date Obiect

Obțineți data și ora curente

const now = new Date();

// Mon Aug 10 2019 12:58:21 GMT-0400 (Eastern Daylight Time)

Obțineți o dată și o oră cu valori individuale

const specifiedDate = new Date(2019, 4, 29, 15, 0, 0, 0);

// Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Sintaxa este Date(year, month, day, hour, minute, second, millisecond).

Rețineți că lunile sunt zero indexate, începând cu ianuarie la 0 și terminând cu decembrie la 11.

Obțineți o dată și o oră dintr-o marcă de timp

const unixEpoch = new Date(0);

Aceasta reprezintă ora de joi, 1 ianuarie 1970 (UTC) sau ora Unix Epoch. Epoca Unix este importantă deoarece este ceea ce JavaScript, Python, PHP și alte limbaje și sisteme folosesc intern pentru a calcula ora curentă.

new Date(ms) returnează data epocii plus numărul de milisecunde în care treci. Într-o zi sunt 86.400.000 de milisecunde, deci:

ad-banner
const dayAfterEpoch = new Date(86400000);

va reveni vineri, 2 ianuarie 1970 (UTC).

Obțineți o dată și o oră dintr-un șir

const stringDate = new Date('May 29, 2019 15:00:00');

// Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Obținerea datei în acest fel este foarte flexibilă. Toate exemplele de mai jos revin valabile Date obiecte:

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')

Puteți utiliza, de asemenea, Date.parse() metoda de returnare a numărului de milisecunde de la epocă (1 ianuarie 1970):

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

Setarea unui fus orar

Când treceți un șir de date fără a seta un fus orar, JavaScript presupune că data / ora sunt în UTC înainte de a-l converti în fusul orar al browserului:

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)

Acest lucru poate duce la erori în care data returnată este oprită cu multe ore. Pentru a evita acest lucru, treceți într-un fus orar împreună cu șirul:

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');
*/

De asemenea, puteți trece unele, dar nu toate, codurile de fus orar:

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 Metode de obiecte

De multe ori nu veți avea nevoie de întreaga dată, ci doar de o parte din ea, cum ar fi ziua, săptămâna sau luna. Din fericire, există o serie de metode pentru a face acest lucru:

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)

Faceți mai ușor lucrul cu datele cu Moment.js

Obținerea corectă a datelor și orelor nu este o sarcină mică. Fiecare țară pare să aibă un mod diferit de formatare a datelor, iar contabilitatea pentru diferite fusuri orare și ora de vară / ora de vară necesită, bine, mult timp. Acolo strălucește Moment.js – face ca analiza, formatarea și afișarea datelor să fie o briză.

Pentru a începe să utilizați Moment.js, instalați-l printr-un manager de pachete, cum ar fi npmsau adăugați-l pe site-ul dvs. printr-un CDN. A se vedea Documentația Moment.js pentru mai multe detalii.

Obțineți data și ora curente cu Moment.js

const now = moment();

Aceasta returnează un obiect cu data și ora în funcție de locația browserului dvs., împreună cu alte informații locale. Este similar cu JavaScript nativ new Date().

Obțineți o dată și o oră dintr-o marcă de timp cu Moment.js

Similar cu new Date(ms), puteți trece numărul de milisecunde de la epocă la moment():

const dayAfterEpoch = moment(86400000);

Dacă doriți să obțineți o dată folosind un timestamp Unix în câteva secunde, puteți utiliza unix() metodă:

const dayAfterEpoch = moment.unix(86400);

Obțineți o dată și o oră dintr-un șir cu Moment.js

Parsarea unei date dintr-un șir cu Moment.js este ușoară, iar biblioteca acceptă șiruri în format ISO 8601 sau RFC 2822 Date Time Time, împreună cu orice șir acceptat de JavaScript Date obiect.

Șirurile ISO 8601 sunt recomandate, deoarece este un format acceptat pe scară largă. Aici sunt cateva exemple:

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

moment('20190421');
moment('20190421T0530');

Setarea unui fus orar cu Moment.js

Până acum, am folosit Moment.js în mod local, ceea ce înseamnă că orice intrare este presupusă a fi o dată sau o oră locală. Acest lucru este similar cu modul în care JavaScript-ul nativ Date obiectul funcționează:

const exactBirthMoment = moment('2018-06-13 06:27:00');

console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Cu toate acestea, pentru a seta un fus orar, trebuie mai întâi să introduceți obiectul Moment Modul UTC:

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)

Apoi, puteți ajusta diferența de fusuri orare cu utcOffset() metodă:

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)

De asemenea, puteți seta decalajul UTC ca număr sau șir:

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

Pentru a utiliza fusuri orare numite (America/Los_Angeles) sau coduri de fus orar (PDT) cu obiecte Moment, verificați Moment Timezone bibliotecă.

Formatați data și ora cu Moment.js

Unul dintre punctele forte pe care Moment.js le are asupra JavaScript-ului nativ Date obiecte este cât de ușor este să formatați data și ora de ieșire. Înlănțuiți doar format() metoda către un obiect Moment date și treceți-i un șir de format ca parametru:

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"

Iată un tabel cu câteva jetoane de formatare obișnuite:

Intrare Ieșire Descriere
AAAA 2019 An de 4 cifre
DA 19 2 cifre an
MMMM August Numele lunii complete
MMM Aug Numele lunii prescurtate
MM 08 Lună cu 2 cifre
M 8 Lună cu 1 cifră
DDD 225 Ziua anului
DD 13 Ziua lunii
Do 13 Ziua lunii cu ordinal
dddd miercuri Numele întregii zile
ddd Miercuri Numele zilei prescurtat
HH 17 Ore în 24 de ore
hh 05 Ore în 12 ore
mm 32 Minute
ss 19 Secunde
A am pm Ante sau post meridiem
A AM PM Cu majuscule ante sau post meridiem
Z Z +0900 Fus orar decalat de la UTC
X 1410715640.579 Unix timestamp în câteva secunde
XX 1410715640579 Unix timestamp în milisecunde

A se vedea Documente Moment.js pentru mai multe jetoane de formatare.

Lucrul cu JavaScript Date obiecte și Moment.js nu trebuie să consume mult timp. Acum ar trebui să știți mai mult decât suficient pentru a începe cu ambele.