Datum

Práce s daty je velmi běžný úkol při použití jakéhokoli programovacího jazyka a naštěstí nám JavaScript může s tím pomoci díky vestavěnému objektu Date. Název je však trochu zavádějící, protože nezpracovává pouze data, ale také čas, jak uvidíme v tomto článku, kde se trochu více ponoříme do tohoto užitečného objektu.

Konstruktor Date

V jeho nejjednodušší formě, když vytvoříte nový objekt Date, bude reprezentovat datum a čas v okamžiku, kdy byl vytvořen, jak můžete vidět z tohoto jednoduchého příkladu:

let date = new Date();
alert(date);
// Output will look like this: 
// Thu Mar 23 2023 10:46:40 GMT+0100 (Central European Standard Time)

Když vypíšeme datum, bude to velmi detailní verze aktuálního data a času, včetně časového pásma. Samozřejmě to můžeme změnit, ale o tom později. Pojďme si trochu více promluvit o parametrech, které můžeme předat objektu Date, protože to chování dost změní.

Vytvoření konkrétního data

Můžeme vytvořit konkrétní datum (a čas) pomocí několika dostupných konstruktorů. Nejpřesnější způsob, jak to udělat, je ruční specifikace všech komponent, jak uvidíme v tomto příkladu:

// Year, Month, Day
let date1 = new Date(2023, 11, 31);
// Sun Dec 31 2023 00:00:00
alert(date1);

// Year, Month, Day, Hours, Minutes
let date2 = new Date(2024, 0, 1, 22, 30);
// Mon Jan 01 2024 22:30:00
alert(date2);

Všimněte si, že když předáváme měsíc objektu Date, nejedná se o skutečný měsíc, ale o index měsíce, který je založen na nulovém indexu, což znamená, že sahá od 0 (leden) do 11 (prosinec).

Další přístup spočívá v předání řetězce s datem a (volitelně) časem, například takto:

let dateString1 = "2023-12-31";
let date1 = new Date(dateString1);
alert(date1);

let dateString2 = "2023-12-31 22:30:42";
let date2 = new Date(dateString2);
alert(date2);

Buďte však při tomto opatrní! Výsledek se může lišit v závislosti na JavaScriptovém enginu/implementaci, pokud nepoužíváte konzistentně formát ISO 8601 (RRRR-MM-DDTHH:mm:ss.sssZ).

To jsou nejčastěji používané způsoby, jak vytvořit objekt Date. Pro úplný seznam se prosím obraťte na dokumentaci.

Metody Date

Jakmile máte instanci objektu Date, získáte přístup k hromadě užitečných metod. Ne všechny z nich budou zde pokryty, ale pojďme se podívat na ty nejzajímavější. Pokud potřebujete úplný seznam, prosím, podívejte se do dokumentace.

Date.get* methods: getDate(), getMonth() etc.

Pro extrakci konkrétních částí data můžete použít jednu nebo několik metod get*. Pro každou složku data existuje jedna, takže stačí zavolat tu, kterou potřebujete. Zde je příklad:

let date = new Date(2023, 11, 31);
alert(date.getDate()); // 31
alert(date.getMonth()); // 11
alert(date.getFullYear()); // 2023

Dvě důležité věci, které je třeba zde zvážit: Opět, vrácený měsíc je index měsíce, takže je založen na nule (leden je 0, prosinec je 11), takže pokud potřebujete číslo měsíce a ne index, budete muset přičíst 1.

Také si všimnete, že volám metodu getFullYear(), ale proč najednou vyžaduje slovo "full", když ostatní metody to nevyžadují? No, existuje také metoda getYear(), ale ta je zastaralá a NEMĚLA by se používat.

Date.get* methods: getHours(), getMinutes() etc.

Najdete zde také metody pro extrakci časových složek objektu Date - od hodin až po milisekundy. Zde je příklad:

let date = new Date();
alert(date.getHours());
alert(date.getMinutes());
alert(date.getSeconds());
alert(date.getMilliseconds());

Tyto můžete potřebovat v některém okamžiku, ale pokud jen chcete formátovat data a/nebo čas konkrétním způsobem, existují metody, které jsou na to lépe vhodné. Za chvíli se k nim dostaneme.

Metody Date.get*: Varianty UTC

Pro všechny metody get*, o kterých jsme právě mluvili, existují také varianty pro koordinovaný světový čas (UTC). Takže například místo volání getHours() můžete zavolat getUTCHours() pro získání hodin v UTC. Podívejme se na příklad:

let date = new Date();
alert(date.getHours());
alert(date.getUTCHours());

Date.now()

Tato statická metoda vrátí počet milisekund uplynulých od epochy (definované jako půlnoc na začátku 1. ledna 1970, UTC). Příklad:

alert(Date.now());

Date.parse()

Můžete použít statickou metodu parse() nalezenou v objektu Date k parsování řetězce obsahujícího datum (a volitelně čas). Pokud je řetězec data úspěšně zpracován, výsledkem bude počet milisekund od 1. ledna 1970, 00:00:00 UTC, který pak může být snadno převeden na objekt Date nebo použit pro jiné typy výpočtů. Zkusme příklad:

let dateString = "July 20, 1969, 20:18:04 UTC";
let millisecondsSinceMoonLanding = Date.parse(dateString);
alert(millisecondsSinceMoonLanding);

let moonlandingDate = new Date(millisecondsSinceMoonLanding);
alert(moonlandingDate);

Ale jak bylo zmíněno dříve, buďte při tomto opatrní! Výsledek se může lišit v závislosti na JavaScriptovém enginu/implementaci, pokud nepoužíváte konzistentně formát ISO 8601 (RRRR-MM-DDTHH:mm:ss.sssZ). I když se mohou zdát, že jiné formáty fungují ve vašem oblíbeném prohlížeči, pravděpodobně nebudou fungovat ve všech enginách a chování se může v budoucnu změnit.

V případě, že zadáte neplatný řetězec data, metoda parse() vrátí NaN (Not a Number).

Date.set* metody: setDate(), setMonth() etc.

Stejně jako metody get*, které vracejí specifickou složku objektu Date, máme odpovídající metody set, které vám umožní změnit různé části objektu Date. Například můžeme rychle změnit den v měsíci v objektu Date pomocí metody setDate(), takto:

let date = new Date(2023, 11, 1);
// Example output: Fri Dec 01 2023 00:00:00
alert(date);

date.setDate(31);
// Example output: Sun Dec 31 2023 00:00:00
alert(date);

V tomto příkladě specifikujeme hodnotu "31" jako parametr pro metodu setDate(), protože to je datum v měsíci, které chceme. Můžete však také zadat větší číslo nebo dokonce záporné číslo. Podívejte se na tento příklad:

let date = new Date(2023, 11, 1);
// Example output: Fri Dec 01 2023 00:00:00
alert(date);

date.setDate(32);
// Example output: Mon Jan 01 2024 00:00:00
alert(date);

Všimněte si, jak jsem změnil 31 na 32. Samozřejmě, v prosinci je pouze 31 dní, takže JavaScript přenese zbývající dny a příslušně zvýší ostatní části objektu Date. V tomto případě bude novým datem první den ledna následujícího roku.

Pokud zadáme záporné číslo, datum bude aktualizováno počítáním zpět od posledního dne předchozího měsíce. Například -3 by mělo za následek, že datum bude nastaveno na 3 dny před posledním dnem předchozího měsíce:

let date = new Date(2023, 11, 1);
// Example output: Fri Dec 01 2023 00:00:00
alert(date);

date.setDate(-3);
// Example output: Mon Nov 27 2023 00:00:00
alert(date);

Toto můžete použít k poměrně kreativním manipulacím s datem a jak bylo zmíněno, existují metody pro všechny části objektu Date. Neproberu je všechny, protože většinou fungují podobně jako metoda setDate(), kterou jsme právě podrobně popisovali, ale pro všechny specifika si prosím prohlédněte tuto referenci. Zde najdete také varianty metod setUTC*.

Date.toString() / Date.toDateString() / Date.toTimeString()

Kdykoli vypíšete objekt Date, je volána jeho metoda toString(), která vrátí datum a čas pěkně naformátované v anglickém formátu, s použitím lokálního časového pásma. Toto jsme již viděli několikrát v akci v příkladech výše, ale pro úplnost, zde je krátký příklad:

let date = new Date();
alert(date);
// Example output: Thu Mar 30 2023 10:30:26 GMT+0200 (Central European Summer Time)

Jak bylo zmíněno, metoda toString() je automaticky volána v příkladu výše. Pokud však potřebujete pouze datumovou nebo časovou složku objektu Date, můžeme použít metody toDateString() a toTimeString(). Jsou ve skutečnosti používány metodou toString(), která jednoduše vrátí výsledek těchto dvou metod oddělených mezerou, jak je ilustrováno tímto příkladem:

let date = new Date();
// Example output: Thu Mar 30 2023 10:30:26 GMT+0200 (Central European Summer Time)
alert(date.toString());

// Example output: Thu Mar 30 2023
alert(date.toDateString());

// Example output: 10:30:26 GMT+0200 (Central European Summer Time)
alert(date.toTimeString());

A opět, pokud hledáte UTC, existuje také metoda toUTCString().

Date.toLocaleString() / Date.toLocaleDateString() / Date.toLocaleTimeString()

Jak bylo zmíněno, obvyklé metody toString() používají anglický formát při formátování data. Pokud to není chování, které hledáte, například protože chcete, aby data používala formát odpovídající jazyku vašeho webu/aplikace, můžete použít varianty toLocale*.

Bez jakýchkoli parametrů tyto metody formátují datum a/nebo čas podle výchozího jazykového nastavení. Pokud spouštíte JavaScript v prohlížeči, výchozí jazykové nastavení bude obvykle dodáno prohlížečem na základě nastavení uživatele. Můžete to otestovat spuštěním následujícího příkladu a zjistit, zda je formát takový, jak byste očekávali:

let date = new Date();
// Example output: 3/30/2023, 10:49:31 AM
alert(date.toLocaleString());

// Example output: 3/30/2023
alert(date.toLocaleDateString());

// Example output: 10:49:31 AM
alert(date.toLocaleTimeString());

Tyto metody však také přijímají dva parametry: locale a options. První parametr, locale, vám umožňuje specifikovat, které jazykové nastavení by mělo být použito pro formátování data. Měli byste použít jazykový tag IETF BCP 47 pro specifikaci, které jazykové nastavení by mělo být použito - zde je několik příkladů:

let date = new Date();
// Example output (English, US): 3/30/2023, 11:12:26 AM
alert(date.toLocaleString("en-US"));

// Example output (Spanish, Spain): 30/3/2023, 11:12:26
alert(date.toLocaleString("es-ES"));

// Example output (German, Germany): 30.3.2023, 11:12:26
alert(date.toLocaleString("de-DE"));

A samozřejmě zde můžete použít také varianty toLocaleDateString() a toLocaleTimeString(), pokud potřebujete pouze části data nebo času.

Jako druhý parametr, označovaný jako možnosti, můžete úplně přizpůsobit způsob, jakým je datum formátováno. Existuje spousta možností, takže se do detailů nebudu pouštět, místo toho vám jen ukážu příklad:

let date = new Date();

let dateOptions = 
{	
	weekday: "long",  
	month: "long",
	year: "numeric",
	day: "numeric",
	hour: "numeric",
	minute: "numeric",
	hour12: false
};

// Example output: Thursday, March 30, 2023 at 23:31
alert(date.toLocaleString("en-US", dateOptions));

Pro úplný seznam možností se prosím podívejte na tento odkaz.

Shrnutí

Jak je vidět z příkladů v tomto článku, objekt Date je velmi užitečný při práci s daty v JavaScriptu, poskytuje různé metody pro parsování a formátování.

Pokud však pocházíte z jiného, moderního programovacího jazyka, jako je Java nebo C#, mohou vám chybět některé funkce související s daty. V takovém případě se můžete podívat na některou z mnoha knihoven pro práci s daty v JavaScriptu, jako je Day.js or https://date-fns.org/.. Přidají spoustu funkcí souvisejících s daty, které se mohou hodit pro složitější případy použití.