Práce s daty Použití date-fns v JavaScriptu

autor:
Tweet
Share
Share
Pin

Práce s datovými údaji představuje nelehký úkol. Naštěstí existuje knihovna date-fns, která zjednodušuje manipulaci s daty v JavaScriptu.

Ponořme se hlouběji do tajů knihovny date-fns a ulehčeme si tak práci. Tato knihovna je známá svou lehkostí.

Instalace balíčku

Pro práci s externí knihovnou, jakou je date-fns, je nezbytné nejprve nastavit projekt pomocí npm. Níže naleznete stručný návod k nastavení.

Předpokládám, že máte nainstalované NodeJS nebo IDE, abyste si tento postup mohli vyzkoušet.

  • Přejděte do vámi vybraného adresáře, kde chcete pracovat.
  • Spusťte příkaz `npm init` pro inicializaci projektu.
  • Odpovězte na zobrazené otázky dle vašeho uvážení.
  • Nyní nainstalujte knihovnu date-fns pomocí příkazu níže:
npm install date-fns
  • Vytvořte nový soubor s názvem `dateFunctions.js`.

Nyní jste připraveni začít objevovat možnosti knihovny date-fns. Projděme si některé její základní metody.

Je platné

Ne každé datum je platné.

Například datum 30. února 2021 neexistuje. Jak tedy můžeme ověřit, zda je konkrétní datum platné či nikoliv?

Metoda `isValid` z knihovny date-fns nám umožňuje snadno zjistit, zda je dané datum skutečné.

Podívejme se na kód, který ověřuje platnost data.

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Při spuštění tohoto kódu můžete být překvapeni, že 30. únor 2021 je označen jako platný. Ale to není pravda.

Proč tomu tak je?

JavaScript automaticky převede nadbytečný den v únoru na 1. března 2021, což je platné datum. Pro ověření si zkuste vypsat `new Date(„2021, 02, 30“)` do konzole.

console.log(new Date("2021, 02, 30"));

Knihovna date-fns nabízí metodu `parse`, která tento problém řeší. Metoda správně analyzuje zadané datum a vrací přesné výsledky.

Prostudujte si následující kód:

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

Formátování

Základním úkolem při práci s daty je jejich formátování do požadované podoby. Metoda `format` z knihovny date-fns umožňuje formátovat data do různých formátů.

Například datum můžeme formátovat jako 23-01-1993, 1993-01-23 10:43:55, úterý, 23. ledna 1993 atd. Pro spuštění si prohlédněte následující kód:

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

Kompletní seznam formátů naleznete zde.

addDays

Metoda `addDays` se používá pro posun data o určitý počet dní.

Zjednodušeně řečeno, touto metodou můžeme k jakémukoliv datu přičíst určitý počet dní a získat tak budoucí datum. Má to mnoho praktických využití.

Představte si, že máte narozeniny za X dní a jste zaneprázdněni. Může se stát, že na ně zapomenete. Metodu `addDays` můžete použít pro automatické upozornění na narozeniny v budoucnu. Zde je příklad kódu:

const { format, addDays } = require("date-fns");

const today = new Date();

// narozeniny za 6 dní
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

Stejně jako metoda `addDays` existují i další metody jako `addHours`, `subHours`, `addMinutes`, `subMinutes`, `addSeconds`, `subSeconds`, `subDays`, `addWeeks`, `subWeeks`, `addYears`, `subYears` atd. Funkci těchto metod snadno odvodíte z jejich názvu.

Vyzkoušejte je.

formatDistance

Psaní kódu pro porovnání dat od nuly je složité. Ale proč vlastně data porovnáváme?

Porovnání dat se využívá v mnoha aplikacích. Například na sociálních sítích se setkáváte s hláškami typu „před 1 minutou“, „před 12 hodinami“, „před 1 dnem“ atd. V těchto případech se porovnává datum a čas publikování s aktuálním datem a časem.

Metoda `formatDistance` dělá totéž. Vrátí časový rozdíl mezi dvěma zadanými daty.

Napišme si program, který zjistí váš věk:

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Věk: ${formatDistance(presentDay, birthday)}`);

eachDayOfInterval

Představte si, že potřebujete zjistit data následujících X dní. Metoda `eachDayOfInterval` nám pomůže získat všechny dny mezi počátečním a koncovým datem.

Zkusme si vypsat následujících 30 dní od dnešního dne:

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
    console.log(format(day, "PPPP"));
});

max a min

Metody `max` a `min` vyhledají největší a nejmenší datum z dané sady dat. Tyto metody v knihovně date-fns jsou velmi intuitivní. Zde je krátký příklad:

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);

je stejné

Funkci metody `isEqual` lze snadno odvodit. Používá se pro ověření, zda jsou dvě data identická. Prohlédněte si kód níže:

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

Závěr

Kdybychom chtěli probrat všechny metody v knihovně date-fns, zabralo by to několik dní. Nejlepším způsobem, jak se naučit používat knihovnu, je seznámit se s jejími základními metodami a pak studovat její dokumentaci pro další detaily. Tento postup platí i pro date-fns.

V tomto tutoriálu jste se seznámili se základními metodami. Pro podrobnější informace se podívejte do dokumentace, nebo zvažte online kurzy jako např. JavaScript, jQuery a JSON.

Příjemné kódování 👨‍💻