Jak získat aktuální datum v JavaScriptu

Úvod

Ať už vytváříte aplikaci pro každodenní rutinu, svůj vlastní blog nebo většinu jiných typů dynamických webových aplikací, pravděpodobně budete muset pracovat s daty. V tomto článku se naučíme, jak získat aktuální datum v JavaScriptu, abyste mohli úspěšně vyvíjet své aplikace. V JavaScriptu je na výběr nepřeberné množství možností, ale hlavní používaná třída je Date() . Má mnoho metod a způsob použití bude záviset na formátu data, který chcete získat. Poté vám ukážu oblíbenou JavaScriptovou knihovnu, kterou lze použít pro formátování času obecně, nejen dat.

Pomocí Date() třída

Date() je základní třída v JavaScriptu, když mluvíme o čase. Existuje několik způsobů, jak z této třídy získat podrobným způsobem čas a datum!

Pomocí getDate() , getMonth() a getFullYear() metody

Poznámka k metodě getDate :První věc, které si při používání tohoto přístupu všimneme, je, že používáme getDate a ne getDay . Důvodem je, že getDay metoda vrací den v týdnu, takže jelikož je teď pátek, když píšu, getDay metoda by vrátila 5. Metoda getDate vlastně dělá to, co v tomto případě potřebujeme, vrací číslo dne v měsíci. Takže pro mě je právě teď den v měsíci 21 (protože je 21.05.2021.). Tyto metody se dají snadno zaměnit, a tak jsem to chtěl dát najevo.

Poznámka k metodě getMonth :Další věc, na kterou je třeba dávat pozor, je, že měsíční indexy začínají od 0, takže leden je 0, únor je 1 atd. V zásadě, když získáme číslo měsíce, musíme přidat 1.

Nyní, když jsme odstranili potenciální problémy, pojďme kód:

let date = new Date()
let day = date.getDate();
let month = date.getMonth()+1;
let year = date.getFullYear();

let fullDate = `${day}.${month}.${year}.`;
console.log(fullDate);

Nejprve vytvoříme instanci třídy Date a pro každou část data používáme proměnnou k jejímu rozdělení a kontrole.

Každý výsledek metody jsme umístili do samostatné proměnné a poté pomocí řetězcové interpolace vytvořili úplné datum. Řetězcová interpolace je, když předáváme proměnné řetězci; v JavaScriptu je toho dosaženo mezi zpětnými zaškrtnutími ( `` ) a proměnné jsou umístěny v ${variableName} . Pokud nedáváte přednost řetězcové interpolaci, opačným způsobem je jednoduše zřetězení (přidat) řetězce dohromady takto:

let fullDate = day + "." + month + "." + year + ".";

Naše výsledky budou ve všech případech stejné:

21.5.2021. // string interpolation
21.5.2021. // string concatenation

Řekněme, že chcete zobrazit měsíc jako 05 a ne 5 . Bohužel JavaScript má vestavěný Date class nemá mnoho možností pro formátování dat na řetězce jako jiné knihovny. V tomto případě tedy budeme muset provést formátování sami, což můžeme udělat pomocí některé z metod JavaScriptu na řetězcích, jako je padStart(length, substring) . Co to dělá 'podloží' (předloží) náš řetězec s substring , dokud nedosáhne length . Takže protože chceme vytvořit 05 od 5 , chceme náš řetězec podložit "0", dokud nedosáhne délky 2. Před tím vším musíme cast date.getMonth()+1 zadejte String . Odsílání explicitně mění typ proměnné z jedné na druhou. Zde změníme typ number zadejte String . Naše month proměnná se změní na:

let month = String(date.getMonth()+1).padStart(2, "0");

Tím se změní náš formát data na:

21.05.2021.

Pomocí toJSON() Metoda

Předchozí metoda ponechala místo pro formátování data; můžete mít datum jako dd/mm/yyyy , dd-mm-yyyy , dd.mm.yyyy a všechny ostatní variace týkající se pořadí dne, měsíce a roku. Při použití toJSON() , vrátí yyyy-mm-dd formát vedle formátu času, hh:mm:ss.ms .

Podívejme se na tento přístup:

let date = new Date().toJSON();
console.log(date);

Výsledkem bude:

2021-05-21T13:42:07.553Z

Měli byste vidět výstup podobný tomuto, ale váš výstup se bude samozřejmě lišit v závislosti na tom, kdy jste kód spustili. Vidíme, že potřebujeme pouze datum, což je prvních 10 znaků, takže použijeme JavaScript slice() metoda. Metoda slice(a, b) odřízne řetězec z bodu a do bodu b; v našem příkladu od 0 do 10. Zkusme to:

let date = new Date().toJSON().slice(0, 10);

Toto vrátí:

2021-05-21

Tento řetězec můžeme dále dělit, takže můžeme uspořádat části do proměnných day, month a year , ale bylo by to přehnané, takže pokud potřebujete jiný formát, použijte jiný přístup.

Pomocí toISOString() ,_ toUTCString()_ a toLocaleDateString() Metody

Zajímavost:toISOString() vrátí přesně stejný výsledek jako toJSON() , takže to přeskočíme a přejdeme rovnou do toUTCString() .

Pomocí toUTCString()

let date = new Date().toUTCString();
console.log(date);

Poskytne nám výstup:

Fri, 21 May 2021 13:53:30 GMT

Tento formát také vrátí datum a čas s přidáním dne v týdnu. Jak jsem řekl v toJSON() sekce, mohli byste tento výsledek dále analyzovat, ale pravděpodobně by to bylo zbytečné, protože máte různé přístupy. Protože se dozvídáme jen datum, můžeme to rozkrájet. Nyní již není potřeba casting, protože toto je již String :

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

let date = new Date().toUTCString().slice(5, 16);

Tím získáme požadovaný výstup:

21 May 2021

Pomocí toLocaleDateString()

Tato metoda vrací datum ve formátu odpovídajícím jazyku vašeho systému. Má dokonce možnost předat požadovaný jazyk jako argument a dokonce i jednoduché možnosti formátování data, jako je weekday , month , day , atd. Rozdělíme to na 3 příklady:

1. Výchozí možnosti

   Podívejme se, co se stane, když metodu zavoláme bez jakýchkoli argumentů:

   let date = new Date().toLocaleDateString();
   console.log(date);
   

   Výstup, pro mě , bude:

   5/21/2021
   

   Tento výstup závisí na vašem národním prostředí, můj je v USA, takže formát bude jako formát data v USA.

2. Předávání pouze jazykových preferencí

   Pokud chcete definovat konkrétní národní prostředí, můžete jej předat jako argument řetězce, například takto:

   let date = new Date().toLocaleDateString("fr-FR");
   console.log(date);
   

   fr-FR je místní kód pro Francii. Všechny místní kódy naleznete zde.

   Francouzský formát data je dd/mm/yyyy , takže výstup bude:

   21/5/2021
   

3. Předávání jak jazykových preferencí, tak možností

   Nakonec si projdeme možné možnosti. Pouze měsíc a pracovní den může mít hodnotu "long" nebo "numerický". Den a rok může být pouze "numerický":

   • den
   • měsíc
   • rok
   • pracovní den

const dateOptions = { 
    day: 'numeric',
    month: 'long',
    year: 'numeric'
};

console.log(event.toLocaleDateString('fr-FR', dateOptions));

Vyloučíme weekday protože potřebujeme jen datum. Toto by mělo vypsat:

21 mai 2021

Nyní jste se také naučili trochu francouzsky.

Pomocí now()

Metoda now() vrací počet milisekund uplynulých od 1. ledna 1970 - což je začátek epochy Unixu v programování. Pokud předáme počet milisekund do Date konstruktoru, můžeme získat datum formátu ISO. Zkusme to:

let time = Date.now()
console.log(time);

Což bude opět výstup pro mě :

1621608925212

Nyní, když předáme, že time do konstruktoru, jak je uvedeno výše, můžeme vytvořit objekt data s tímto časem:

let date = new Date(time);
console.log(time);

Výsledkem bude:

2021-05-21T14:55:25.212Z

A my už víme, jak to zpracovat pomocí slice() .

Pomocí moment.js

Toto je pouze alternativa pro použití všech předchozích metod, knihovna vytvořená speciálně pro data a časy v JavaScriptu. Jejich webové stránky můžete navštívit zde. Přestože má tato knihovna poměrně málo funkcí, proberu pouze to, jak vytvořit a provést jednoduché formátování pro datum. Podívejme se, jak to funguje:

moment.format();
moment.format('Do MMMM YYYY');
moment.format('Do MMMM YY');

Pokud do formátu nic neodešlete, získáte ISO reprezentaci data, můžete si však vybrat libovolný formát (a který je definován v dokumentaci Momentu).

Výše uvedený kód vypíše:

2021-05-21T17:17:02+02:00
May 21st 2021
May 21st 21

Tato možnost není nejlepší, pokud jediné, co hledáte, je načtení aktuálního data. Je to proto, že knihovna Moment je poměrně velká a při použití ve front-end aplikacích nafoukne váš kód JS. Na druhou stranu, pokud potřebujete manipulaci s datem a časem nebo pokročilejší formátování, je to skvělá knihovna.

Závěr

Existuje mnoho způsobů, jak načíst datum v JavaScriptu, stačí si vybrat ten, který vyhovuje vašemu případu použití. Pro velmi jednoduché potřeby, jako je vytvoření data nebo velmi jednoduché formátování, můžete použít vestavěný Date třída. Pokud potřebujete něco trochu složitějšího s datem a časem, moments.js je knihovna, kterou si můžete vybrat.