Úvod

Často se setkáváme s různými fóry a weby, kde potřebujeme zadat své datum narození nebo vybrat datum pro schůzku z jakéhokoli důvodu a přímo před očima se nám objeví ikona podobná kalendáři. Jak a odkud to vyskočí? Musí to být nějaký specifický a dynamicky poháněný kalendář, který chytře rozpoznává a předkládá nám k výběru termínů podle našeho přání. Zde se objevuje React Date Picker. V tomto tutoriálu bychom se naučili všechny takové metody od nuly až po pokročilou úroveň o tom, jak jsou implementovány v Reactu a jak je lze přizpůsobit. Pokračujme v diskusi.

The Reagovat Výběr data je užitečná a hojná komponenta používaná k zobrazení dat pomocí formátu dialogového okna kalendáře. V dnešní době je obvykle k dispozici mnoho možností výběru data. Všechny mohou mít různé technické aspekty a aplikace. V tomto tutoriálu se budeme konkrétně zabývat nástrojem React Date Picker. K tomu potřebujeme mít balíček, který zobrazuje čas a datum. Pro lepší pochopení vytvoříme aplikaci, která by nám pomohla lépe porozumět React Date Picker. Ale předtím jej nainstalujme, jak je znázorněno v níže uvedených krocích.

Instalace

Abychom mohli nainstalovat Date Picker pro naši aplikaci React, potřebujeme mít v našem systému předinstalovaný Node.js. Ačkoli není důležité mít vždy moduly uzlů, důrazně se doporučuje je stáhnout, aby byly všechny závislosti efektivně obsluhovány. Proto je níže uveden příkaz k instalaci React Date Picker.

Balíček lze nainstalovat přes npm:

0,06 jako zlomek

 npm install react-datepicker --save 

Nebo přes Příze:

 yarn add react-datepicker 

Může nastat potřeba nainstalovat React a jeho Proptypes jednotlivě, protože bez těchto závislostí není možné sestavit React Date Picker. Také možná budeme muset použít CSS z externích balíčků, aby nástroj pro výběr data vypadal vizuálně skvěle. Abychom mohli začít s naší aplikací, musíme importovat výběr data React do našeho hlavního souboru a musíme jej neustále kontrolovat prostřednictvím zobrazení React.

 import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; const Example = () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; 

Reagovat Datepicker příklad

Za předpokladu, že je náš systém nakonfigurován se všemi instalačními požadavky a závislostmi, naučíme se, jak vytvořit aplikaci React od začátku. Tato implementace je zcela založena na aplikaci React datepicker.

V diskuzi výše předpokládáme, že jsme React a PropTypes nainstalovali nezávisle, protože tyto závislosti nejsou součástí samotného balíčku. Abychom mohli pokračovat v metodách vytváření naší aplikace, musíme postupovat podle níže uvedených kroků.

 npx create-react-app react-datepicker-app 

Přesuňte se do složky projektu pomocí příkazu.

 cd react-datepicker-app 

Spusťte aplikaci React.

 npm start 

Po spuštění enginu Node můžeme zkontrolovat naši aplikaci přes port číslo 3000 localhostu. Také musíme do našeho souboru app.js zahrnout fragment kódu uvedený níže, aby se do našeho souboru importovaly důležité komponenty pro výběr data React.

 // app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Naše aplikace by nyní vypadala nějak takto.

výběr řazení

Ve výše uvedeném ukázkovém kódu jsme nejprve importovali balíčky Výběr data a Bootstrap v šabloně React. Poté jsme jej definovali tak, aby se vázal zvládnout změnu a odešlete Komponentu v kalendáři událostí. Tyto události budou automaticky spuštěny, když uživatel odešle nebo změní hodnoty vstupní hodnoty nástroje Datepicker. Později jsme inicializovali stav formuláře Datepicker s novým Datum() objekt uvnitř konstruktoru. Nakonec jsme spustili Datepicker pomocí níže uvedené směrnice, abychom do něj přidali některé vlastnosti.

Výstup můžeme vizualizovat ve formě kalendářně orientovaného formátu datepicker. Výše uvedený Datepicker přidává přizpůsobené vlastnosti komponentám aplikace React zobrazeným výše. Umožňuje nám vybrat data ve formě měsíce, dny, a let .

Kromě toho máme k přizpůsobení datapickeru různé další metody, ať už jde o barvení součástí nebo chytré použití funkcí pro vyzvednutí dat. Můžeme je také snadno přizpůsobit, pokud máme komponenty HTML a CSS související se souborem app.js.

Lokalizace nástroje Datepicker

Dalším příkladem, o kterém se budeme učit, je lokalizace nástroje Datepicker. Výběr data, který vytvoříme, velmi závisí na internacionalizaci data-fns. Ten totiž slouží k lokalizaci prvků, které budou vystaveny. Pokud potřebujeme použít národní prostředí kromě výchozího en-US, možná ho budeme muset importovat do projektu z date-fns.

Angličtina je navíc výchozí národní prostředí, které se skládá ze 3 metod pro nastavení národního prostředí.

registrovat místní (řetězec, objekt): načte importovaný objekt národního prostředí z date-fns.

Nastavit výchozí národní prostředí (řetězec): nastaví registrované národní prostředí jako výchozí pro všechny instance datepickeru.

rozdělení řetězce v c++

getDefaultLocale: vrátí řetězec zobrazující aktuálně nastavené výchozí národní prostředí.

Tyto služby můžeme importovat do národního prostředí zobrazení kalendáře pomocí níže uvedeného fragmentu kódu.

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

Při importu a uložení těchto místních služeb do našeho souboru app.js bude naše aplikace vypadat takto.

V jiném případě, abychom změnili národní prostředí, musíme primárně změnit kód národního prostředí nebo pomocí internacionalizace data-fns, aby bylo možné podporovat kontrolu kódu.

 setDefaultLocale('es') 

Nastavení časového období kalendáře ve výběru data.

Naučíme se, jak implementovat funkcionalitu rozsahu pomocí minimální datum a vlastnost maxDate v tomto kroku. K tomu importujeme addDays AP já z datum-fns knihovny na začátek naší komponenty React. K přiřazenému datu přidá konkrétní počet dní pro nastavení rozsahu.

 import addDays from 'date-fns/addDays' 

The addDays() metoda má obvykle dva parametry:

Datum: Datum, které je třeba aktualizovat.

Množství: Bylo potřeba zahrnout značné množství dní.

podtrhnout text pomocí css

V kalendáři React si snadno nastavíme časové rozmezí od aktuálních po následujících sedm dní. To lze pochopit, když implementujeme minDatum a maxDate metody v níže uvedeném příkladu kódu.

 render() { return ( Show Date ); } 

Úplný fragment kódu pro naši aplikaci po provedení všech výše uvedených kroků je uveden níže.

 import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Ve výše uvedeném příkladu úryvku jsme vytvořili minDatum jako součást odbavení a uživatel si může vybrat pouze datum před dneškem. Pro komponentu check-out jsme použili hodnotu data, což znamená, že uživatel nemůže vybrat datum před datem příjezdu.

V dalším kroku uložíme hodnotu našeho stavu a definujeme, jak jednotlivé úchyty fungují. Hlavní myšlenkou je implementovat to jednoduchým vytvořením stavu pro každého odbavení a Překontrolovat datum s definovanými hodnotami a uložení dat tam. Jediný rozdíl spočívá v minDatum způsob odbavovací složky, protože je závislý výhradně na odbavovací složce. Aby bylo zajištěno, že vše je nastaveno z hlediska hodnot ne dříve a ne potom, můžeme nyní snadno vybrat data a definovat odhlášení.

Závěr

V tomto tutoriálu jsme byli schopni projít jednoduchým průvodcem krok za krokem vytvořením vlastní komponenty React Datepicker, kterou lze snadno použít jako náhradu za nativní HTML5 datepicker vstupní prvky. Naučili jsme se, jak nastavit aplikaci React na prioritu, protože vykreslování komponent React se může začátečníkům zdát složité, takže nastavení závislostí by začátečník vždy preferoval. Také jsme narazili na různé příklady, abychom vytvořili křišťálově jasný koncept použití komponent Datepicker v naší aplikaci. Dozvěděli jsme se také o procesu lokalizace nástroje pro výběr data, aby proces výběru data nezpůsobil problém, pokud jsou v kalendáři vybrány na určitou dobu.

Přestože vlastní nástroj pro výběr data vytvořený v tomto kurzu funguje podle očekávání, nesplňuje všechny pokročilé požadavky na prvek výběru data. Lze provést další vylepšení, jako je implementace max. a min. pomocí rekvizit, přepínání typu vstupu z textu na datum a zlepšení lepší dostupnosti. Můžeme také vyvinout metody návrhu pro datepicker, který jsme implementovali v tomto tutoriálu, importováním balíčků Bootstrap a přidáním vlastního stylu a vlastností vznášení, aby vypadal lépe.