logo

Cheat Sheet pro formáty data — Jak formátovat data v React DatePicker

Dnes rozebereme běžné formáty data a času a podělíme se o několik užitečných tipů pro používání KendoReact DatePicker.

Věděli jste, že některé země mají jiný formát data než jiné? Taky mě to trochu překvapilo, když jsem se o tom poprvé dozvěděl. Například v USA je běžně používaný formát data MM/DD/RRRR, ale mnoho zemí v Evropě, jako je Spojené království, používá formát DD/MM/RRRR. Některé arabské země používají DD/RRRR/M, zatímco Čína používá RRRR/MM/DD.

Poskytnutí správného formátování data a času může být docela složité, pokud vaše aplikace slouží uživatelům v mnoha různých zemích. Chcete-li zajistit lepší uživatelský dojem, je dobré zobrazovat data ve formátu, na který jsou uživatelé nejvíce zvyklí.

Pojďme se podívat na to, jak můžeme implementovat výše uvedené formáty v React DatePicker. Abychom ilustrovali, jak se můžeme vypořádat s různými formáty data, použijeme KendoReact DatePicker. Kromě toho použijeme KendoReact DateTimePicker k ilustraci, jak formátovat časy.

Pokud vás zajímají další možné formáty data, podívejte se na tuto stránku.

Úplný příklad kódu je k dispozici v tomto úložišti GitHub. Níže je interaktivní příklad toho, co budeme implementovat:

Nastavení projektu

Chcete-li nastavit nový projekt React, můžete spustit npx create-react-app my-react-datepicker příkaz ve vašem terminálu.

Po vytvoření projektu nainstalujte tyto závislosti:

$ npm install --save @progress/kendo-react-dateinputs @progress/kendo-theme-material @progress/kendo-react-intl cldr-core cldr-dates-full @progress/kendo-licensing

Dále nahraďte obsah App.js a App.css soubory, protože potřebujeme vyčistit výchozí kód a importovat motiv, který jsme nainstalovali.

src/App.js 

import '@progress/kendo-theme-material/dist/all.css';
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

src/App.css 

.App {
  max-width: 40rem;
  margin: 2rem auto;
}

To je vše pro nastavení projektu. Pojďme přidat React DatePicker s několika různými formáty data.

Poznámka: KendoReact je komerční knihovna komponent uživatelského rozhraní a jako součást této knihovny budete muset poskytnout licenční klíč, když komponenty používáte ve svých projektech React. Licenční klíč můžete získat prostřednictvím bezplatné zkušební verze nebo vlastnictvím komerční licence. Pro více informací se můžete vydat na stránku KendoReact Licensing.

Formátování dat pomocí nástroje React DatePicker

Skvělá věc na komponentě KendoReact DatePicker je, že poskytuje přímou podporu pro formátování dat. Požadovaný formát data můžeme snadno určit pomocí format podpěra na DatePicker komponent. Níže uvedený kód zobrazuje čtyři nástroje pro výběr data ve formátu data pro USA, Spojené království, arabštinu a čínštinu.

src/components/DatePickers.js 

import { DatePicker } from "@progress/kendo-react-dateinputs";

export default function DatePickers() {
  return (
    <>
      <h2>React DatePicker</h2>
      <form className="k-form k-mb-8">
        <div className="k-my-4">
          <label className="k-form-field">
            US Date Format
            <DatePicker format="MM-dd-yyyy" />
          </label>
        </div>
        <div className="k-my-4">
          <legend>UK Date Format</legend>
          <DatePicker format="dd-MM-yyyy" />
        </div>
        <div className="k-my-4">
          <legend>Arabic Date Format</legend>
          <DatePicker format="dd-yyyy-M" />
        </div>
        <div className="k-my-4">
          <legend>Chinese Date Format</legend>
          <DatePicker format="yyyy-MM-dd" />
        </div>
      </form>
      <h2>Custom date format</h2>
      <form className="k-form k-my-8"></form>
    </>
  );
}

Nyní aktualizujte App.js soubor k vykreslení DatePickers komponenta.

src/App.js 

import "@progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from "./components/DatePickers";

function App() {
  return (
    <div className="App">
      <h1>Date formats examples using DatePicker</h1>
      <DatePickers />
    </div>
  );
}

export default App;

Získat komponentu KendoReact DatePicker pro práci s vlastními formáty data byla hračka. Komponenta DatePicker má navíc skvělou dostupnost, takže ji lze plně ovládat pouze pomocí klávesnice.

Pokud byste chtěli prozkoumat formáty data KendoReact, najdete dokumentaci zde.

A teď, co kdybychom chtěli trochu jiný formát? Řekněme, že jsme chtěli zobrazit celý název měsíce namísto pouze čísel. Můžeme to udělat poskytnutím objektu do format podpěra. Vytvořte novou komponentu s názvem LongMonthFormatPicker .

src/components/LongMonthFormatPicker.js 

import { DatePicker } from "@progress/kendo-react-dateinputs";

export default function LongMonthFormatPicker() {
  return (
    <>
      <h2>Long month format</h2>
      <form className="k-form k-mb-8">
        <div className="k-my-4">
          <label className="k-form-field">
            US Date Format
            <DatePicker
              format={{
                day: "numeric",
                year: "numeric",
                month: "long",
              }}
            />
          </label>
        </div>
      </form>
    </>
  );
}

A aktualizujte App.js zahrnout naši nově vytvořenou komponentu.

src/App.js 

import "@progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from "./components/DatePickers";
import LongMonthFormatPicker from "./components/LongMonthFormatPicker";
function App() {
  return (
    <div className="App">
      <h1>Date formats examples using DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker />
    </div>
  );
}

export default App;

Výsledek můžete vidět na gifu níže. Zobrazené datum začíná celým názvem měsíce a poté následuje den a rok, například August 20, 2021 .

Výběr měsíce reakce

Probrali jsme, jak používat různé formáty data při výběru konkrétního dne, měsíce a roku. Co když ale nechceme vybrat den, ale pouze měsíc a rok a zobrazit je ve formátu jako 11/2021 nebo August 21 ? Můžeme to udělat také.

Ve výchozím nastavení DatePicker Kalendář vyžaduje, aby uživatelé vybrali den, měsíc a rok. Můžeme však poskytnout vlastní komponentu kalendáře. Zabalíme kalendář KendoReact a předáme year jako bottomView a topView rekvizity.

src/components/MonthPickers.js 

import { Calendar, DatePicker } from "@progress/kendo-react-dateinputs";

function CustomCalendar(props) {
  return (
    <Calendar
      {...props}
      topView="year"
      bottomView="year"
    />
  );
}

export default function MonthPickers() {
  return (
    <>
      <h2>Month pickers</h2>
      <form className="k-form k-mb-8">
        <label className="k-form-field mb-4">
          MM/yyyy
          <DatePicker width="100%" format="MM/yyyy" calendar={CustomCalendar} />
        </label>
        <label className="k-form-field mb-4">
          yyyy/MM
          <DatePicker width="100%" format="yyyy/MM" calendar={CustomCalendar} />
        </label>
        <label className="k-form-field">
          Month Year
          <DatePicker
            width="100%"
            format={{
              year: "2-digit",
              month: "long",
            }}
            calendar={CustomCalendar}
          />
        </label>
      </form>
    </>
  );
}

src/App.js 

import "@progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from "./components/DatePickers";
import LongMonthFormatPicker from "./components/LongMonthFormatPicker";
import MonthPickers from "./components/MonthPickers";
function App() {
  return (
    <div className="App">
      <h1>Date formats examples using DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker />
      <MonthPickers />
    </div>
  );
}

export default App;

Locale-Based React DatePicker

Pokud vaše aplikace slouží uživatelům v mnoha různých zemích, pak pravděpodobně budete muset získat výchozí národní prostředí uživatele a umožnit uživateli zadat své vlastní národní prostředí. Komponenta KendoReact DatePicker má prvotřídní podporu globalizace. Pojďme implementovat DatePicker který změní jeho formát a jazyk kalendáře na základě aktuálně vybraného národního prostředí. Budou použita čtyři národní prostředí uvedená na začátku tohoto článku.

Nejprve potřebujeme SelectLocale komponenta, která bude dělat tři věci:

  • Získejte výchozí národní prostředí
  • Umožněte uživateli vybrat národní prostředí ze seznamu locales
  • Poskytněte aktuálně vybrané národní prostředí pomocí children

src/components/SelectLocale.js 

import { useState } from "react";

const locales = ["en-US", "en-GB", "ar-DZ", "zh-Hans"];

const getDefaultLocale = () => {
  return navigator.languages?.[0] || locales[0];
};

export default function SelectLocale(props) {
  const [locale, setLocale] = useState(getDefaultLocale());
  return (
    <>
      <form className="k-form">
        <label>
          Pick locale:
          <select
            style={{ width: 150, marginLeft: 10, height: 40, padding: 5 }}
            value={locale}
            onChange={e => {
              setLocale(e.target.value);
            }}
          >
            {locales.map((option, key) => (
              <option key={key} value={option}>
                {option}
              </option>
            ))}
          </select>
        </label>
      </form>
      {props.children({ locale })}
    </>
  );
}

Musíme poskytnout locale dětem, protože to potřebujeme předat KendoReact IntlProvider komponent. V App.js musíme přidat několik importů. Nejprve naimportujeme SelectLocale komponent, který jsme právě vytvořili, a DynamicLocaleDatePicker vytvoříme za chvíli. Potřebujeme však také importovat data s informacemi kalendáře pro různá národní prostředí. Tato data pocházejí z cldr-core a cldr-dates-full balíčky, které jsme nainstalovali na začátku.

src/App.js 

import "@progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from "./components/DatePickers";
import LongMonthFormatPicker from "./components/LongMonthFormatPicker";
import MonthPickers from "./components/MonthPickers";
import SelectLocale from "./components/SelectLocale";
import { IntlProvider, load } from "@progress/kendo-react-intl";
import DynamicLocaleDatePicker from "./components/DynamicLocaleDatePicker";

import weekData from "cldr-core/supplemental/weekData.json";
import usCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
import usDateFields from "cldr-dates-full/main/en/dateFields.json";
import gbCaGregorian from "cldr-dates-full/main/en-GB/ca-gregorian.json";
import gbDateFields from "cldr-dates-full/main/en-GB/dateFields.json";
import zhCaGregorian from "cldr-dates-full/main/zh-Hans/ca-gregorian.json";
import zhDateFields from "cldr-dates-full/main/zh-Hans/dateFields.json";
import arCaGregorian from "cldr-dates-full/main/ar-DZ/ca-gregorian.json";
import arDateFields from "cldr-dates-full/main/ar-DZ/dateFields.json";

load(
  weekData,
  usCaGregorian,
  usDateFields,
  gbCaGregorian,
  gbDateFields,
  zhCaGregorian,
  zhDateFields,
  arCaGregorian,
  arDateFields
);

function App() {
  return (
    <div className="App">
      <h1>Date formats examples using DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker />
      <MonthPickers />
      <SelectLocale>
        {({ locale }) => (
          <IntlProvider locale={locale}>
            <DynamicLocaleDatePicker />
          </IntlProvider>
        )}
      </SelectLocale>
    </div>
  );
}

export default App;

V neposlední řadě musíme vytvořit DynamicLocaleDatePicker komponenta.

src/components/DynamicLocaleDatePicker.js 

import { DatePicker } from "@progress/kendo-react-dateinputs";

export default function DynamicLocaleDatePicker(props) {
  return (
    <>
      <form className="k-form k-mb-8">
        <div className="k-my-4">
          <label className="k-form-field">
            Locale-based date format
            <DatePicker />
          </label>
        </div>
      </form>
    </>
  );
}

Formát DatePicker a jazyk kalendáře se nyní aktualizují podle vybraného národního prostředí, jak je znázorněno na obrázku níže.

Reagovat DateTimePicker

Dosud jsme probrali několik různých způsobů formátování data. Nyní se podívejme na čas formátování. KendoReact nabízí komponentu React DateTimePicker, která je obohacenou verzí DatePicker . Kromě výběru data umožňuje uživatelům také vybrat čas.

Využijeme výběr národního prostředí, který jsme dříve implementovali pro DatePicker komponent, ale také poskytujeme naše vlastní formáty. Nyní vytvořte novou komponentu s názvem DateTimePickerWithLocale .

src/components/DateTimePickerWithLocale.js 

import { DateTimePicker } from "@progress/kendo-react-dateinputs";

export default function DateTimePickerWithLocale() {
  return (
    <form className="k-form k-mb-8">
      <div className="k-my-4">
        <label className="k-form-field">
          Locale-based date and time picker
          <DateTimePicker />
        </label>
      </div>
      <div className="k-my-4">
        <label className="k-form-field">
          Long date and time
          <DateTimePicker format={"dd-MM-yyyy hh:mm:ss a"} />
        </label>
      </div>

      <div className="k-my-4">
        <label className="k-form-field">
          Custom format
          <DateTimePicker
            format={{
              year: "numeric",
              month: "short",
              hour: "2-digit",
              minute: "2-digit",
              second: "2-digit",
            }}
          />
        </label>
      </div>
    </form>
  );
}

Nakonec importujte a vykreslete komponentu Kendo DateTimePicker v App.js soubor.

src/App.js 

import "@progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from "./components/DatePickers";
import LongMonthFormatPicker from "./components/LongMonthFormatPicker";
import MonthPickers from "./components/MonthPickers";
import SelectLocale from "./components/SelectLocale";
import { IntlProvider, load } from "@progress/kendo-react-intl";
import DynamicLocaleDatePicker from "./components/DynamicLocaleDatePicker";
import DateTimePickerWithLocale from "./components/DateTimePickerWithLocale";

import weekData from "cldr-core/supplemental/weekData.json";
import usCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
import usDateFields from "cldr-dates-full/main/en/dateFields.json";
import gbCaGregorian from "cldr-dates-full/main/en-GB/ca-gregorian.json";
import gbDateFields from "cldr-dates-full/main/en-GB/dateFields.json";
import zhCaGregorian from "cldr-dates-full/main/zh-Hans/ca-gregorian.json";
import zhDateFields from "cldr-dates-full/main/zh-Hans/dateFields.json";
import arCaGregorian from "cldr-dates-full/main/ar-DZ/ca-gregorian.json";
import arDateFields from "cldr-dates-full/main/ar-DZ/dateFields.json";

load(
  weekData,
  usCaGregorian,
  usDateFields,
  gbCaGregorian,
  gbDateFields,
  zhCaGregorian,
  zhDateFields,
  arCaGregorian,
  arDateFields
);

function App() {
  return (
    <div className="App">
      <h1>Date formats examples using DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker />
      <MonthPickers />
      <h2>Locale-based DatePicker</h2>
      <SelectLocale>
        {({ locale }) => (
          <IntlProvider locale={locale}>
            <DynamicLocaleDatePicker />
            <h2>DateTimePicker</h2>
            <DateTimePickerWithLocale />
          </IntlProvider>
        )}
      </SelectLocale>
    </div>
  );
}

export default App;

Konečný výsledek můžete vidět na obrázku níže.

Shrnutí

A je to. Jak nyní víte, formáty data a času se mohou v různých zemích lišit. Může být docela složité vytvořit React DatePicker, který podporuje formátování data a času pomocí národních prostředí. Naštěstí můžeme použít KendoReact, který poskytuje mnoho funkcí bohatých a přístupných komponent, které lze snadno nakonfigurovat a přizpůsobit.