Multe aplicații pe care le construiți vor avea un fel de componentă de dată, indiferent dacă este data creării unei resurse sau marca de timp a unei activități.

Gestionarea formatării datei și a marcajului de timp poate fi epuizantă. În acest ghid, veți afla cum să obțineți data curentă în diferite formate în JavaScript.

Obiectul Data JavaScript

JavaScript are un dispozitiv încorporat Date obiect care stochează data și ora și oferă metode de manipulare a acestora.

Pentru a crea o nouă instanță a fișierului Date obiect, folosiți new cuvânt cheie:

const date = new Date();

Date obiectul conține un Number care reprezintă milisecunde trecute de la epocă, adică 1 ianuarie 1970.

Puteți trece un șir de date către Date constructor pentru a crea un obiect pentru data specificată:

const date = new Date('Jul 12 2011');

Pentru a obține anul curent, utilizați getFullYear() metoda instanței a Date obiect. getFullYear() metoda returnează anul datei specificate în Date constructor:

const currentYear = date.getFullYear();
console.log(currentYear); //2020

În mod similar, există metode pentru a obține ziua curentă a lunii și luna curentă:

const today = date.getDate();
const currentMonth = date.getMonth() + 1;

getDate() metoda returnează ziua curentă a lunii (1-31).

getMonth() metoda returnează luna datei specificate. Un punct de remarcat despre getMonth() metoda este că returnează valori indexate 0 (0-11) unde 0 este pentru ianuarie și 11 pentru decembrie. De aici se adaugă 1 pentru a normaliza valoarea lunii.

Intalneste-te acum

now() este o metodă statică a Date obiect. Returnează valoarea în milisecunde care reprezintă timpul scurs de la epocă. Puteți trece în milisecunde returnate de la now() metoda în Date constructor pentru a instanția un nou Date obiect:

const timeElapsed = Date.now();
const today = new Date(timeElapsed);

Formatarea datei

Puteți formata data în mai multe formate (GMT, ISO și așa mai departe) folosind metodele Date obiect.

toDateString() metoda returnează data într-un format lizibil de către om:

today.toDateString(); // "Sun Jun 14 2020"

toISOString() metoda returnează data care urmează formatului extins ISO 8601:

today.toISOString(); // "2020-06-13T18:30:00.000Z"

toUTCString() metoda returnează data în format de fus orar UTC:

today.toUTCString(); // "Sat, 13 Jun 2020 18:30:00 GMT"

toLocaleDateString() metoda returnează data într-un format sensibil la localitate:

today.toLocaleDateString(); // "6/14/2020"

Puteți găsi referința completă pentru Date metode în Documentația MDN.

Funcția de formatare a datei personalizate

În afară de formatele menționate în secțiunea de mai sus, aplicația dvs. ar putea avea un format diferit pentru date. Ar putea fi în yy/dd/mm sau yyyy-dd-mm format sau ceva similar.

Pentru a rezolva această problemă, ar fi mai bine să creați o funcție reutilizabilă, astfel încât să poată fi utilizată în mai multe proiecte.

Deci, în această secțiune, să creăm o funcție de utilitate care va returna data în formatul specificat în argumentul funcției:

const today = new Date();

function formatDate(date, format) {
	//
}

formatDate(today, 'mm/dd/yy');

Trebuie să înlocuiți șirurile „mm”, „dd”, „yy” cu valorile respective de lună, zi și an din șirul de format trecut în argument.

Pentru a face acest lucru, puteți utiliza replace() metoda de mai jos:

format.replace('mm', date.getMonth() + 1);

Dar acest lucru va duce la o mulțime de înlănțuire a metodelor și va face dificilă întreținerea pe măsură ce încercați să faceți funcția mai flexibilă:

format.replace('mm', date.getMonth() + 1)
    .replace('yy', date.getFullYear())
	.replace('dd', date.getDate());

În loc de metode de înlănțuire, puteți utiliza expresia regulată cu replace() metodă.

Mai întâi creați un obiect care va reprezenta o pereche cheie-valoare a șirului și valoarea sa respectivă:

const formatMap = {
	mm: date.getMonth() + 1,
    dd: date.getDate(),
    yy: date.getFullYear().toString().slice(-2),
    yyyy: date.getFullYear()
};

Apoi, utilizați expresia regulată pentru a potrivi și înlocui șirurile:

formattedDate = format.replace(/mm|dd|yy|yyy/gi, matched => map[matched]);

Funcția completă arată astfel:

function formatDate(date, format) {
    const map = {
        mm: date.getMonth() + 1,
        dd: date.getDate(),
        yy: date.getFullYear().toString().slice(-2),
        yyyy: date.getFullYear()
    }

    return format.replace(/mm|dd|yy|yyy/gi, matched => map[matched])
}

Puteți adăuga, de asemenea, posibilitatea de a formata marcaje de timp în funcție.

Concluzie

Sper că acum aveți o mai bună înțelegere a Date obiect în JavaScript. De asemenea, puteți utiliza alte biblioteci terțe, cum ar fi datesj și moment pentru a gestiona datele din cerere.

Până data viitoare, rămâneți în siguranță și continuați să vă grăbiți.