Úvod
Často sa stretávame s rôznymi fórami a webmi, kde potrebujeme zadať dátum narodenia alebo vybrať dátum na stretnutie z akéhokoľvek dôvodu a priamo pred našimi očami sa objaví ikona podobná kalendáru. Ako a odkiaľ to vychádza? Musí to byť nejaký špecifický a dynamicky poháňaný kalendár, ktorý inteligentne rozpozná a predloží nám výber dátumov podľa našej túžby. Tu sa nachádza React Date Picker. V tomto návode by sme sa naučili všetky takéto metódy od začiatku až po pokročilú úroveň o tom, ako sú implementované v Reacte a ako sa dajú prispôsobiť. Pokračujme v diskusii.
The Reagovať Výber dátumu je užitočný a bohatý komponent používaný na zobrazenie dátumov pomocou formátu dialógového okna kalendára. V súčasnosti je zvyčajne k dispozícii veľa možností výberu dátumu. Všetky môžu mať rôzne technické aspekty a aplikácie. V tomto návode sa budeme konkrétne zaoberať nástrojom React Date Picker. Na to potrebujeme mať k nemu balík, ktorý zobrazuje čas a dátum. Pre lepšie pochopenie vytvoríme aplikáciu, ktorá nám pomôže lepšie porozumieť React Date Picker. Predtým ho však nainštalujte, ako je znázornené v krokoch nižšie.
Inštalácia
Ak chcete nainštalovať nástroj Date Picker pre našu aplikáciu React, musíme mať v našom systéme predinštalovaný súbor Node.js. Aj keď nie je dôležité mať vždy moduly uzlov, dôrazne sa odporúča stiahnuť si ich, aby boli všetky závislosti efektívne obsluhované. Preto je príkaz na inštaláciu nástroja React Date Picker uvedený nižšie.
Balík je možné nainštalovať cez npm:
atoi c
npm install react-datepicker --save
Alebo cez Priadza:
yarn add react-datepicker
Môže vzniknúť potreba inštalovať React a jeho Proptypes jednotlivo, pretože bez týchto závislostí nie je možné zostaviť React Date Picker. Tiež možno budeme musieť použiť CSS z externých balíkov, aby nástroj na výber dátumu vyzeral vizuálne skvele. Ak chcete začať s našou aplikáciou, musíme importovať výber dátumu React do nášho hlavného súboru a musíme ho neustále kontrolovať prostredníctvom zobrazenia 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)} /> ); }; Reagovať Datepicker príklad
Za predpokladu, že náš systém je nakonfigurovaný so všetkými požiadavkami na inštaláciu a závislosťami, naučíme sa, ako vytvoriť aplikáciu React od začiatku. Táto implementácia je úplne založená na aplikácii React datepicker.
V diskusii vyššie predpokladáme, že sme React a PropTypes nainštalovali nezávisle, pretože tieto závislosti nie sú zahrnuté v samotnom balíku. Aby sme mohli pokračovať v metódach vytvárania našej aplikácie, musíme postupovať podľa nižšie uvedených krokov.
npx create-react-app react-datepicker-app
Presuňte sa do priečinka projektu pomocou príkazu.
cd react-datepicker-app
Spustite aplikáciu React.
npm start
Po spustení motora Node môžeme skontrolovať našu aplikáciu cez port číslo 3000 localhost. Do nášho súboru app.js musíme tiež zahrnúť útržok kódu uvedený nižšie, aby sa do nášho súboru importovali dôležité komponenty pre výber dátumu reakcie.
robiť počas java
// 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ša aplikácia by teraz vyzerala asi takto.
Vo vyššie kódovanej vzorke sme najskôr importovali balíky z Výber dátumu a Bootstrap v šablóne React. Potom sme ho definovali tak, aby zvládnuť zmenu a odošlite Komponent v kalendári udalostí. Tieto udalosti sa automaticky spustia, keď používateľ odošle alebo zmení hodnoty vstupnej hodnoty nástroja Datepicker. Neskôr sme inicializovali stav formulára Datepicker s novým Dátum() objekt vo vnútri konštruktora. Nakoniec sme spustili Datepicker pomocou nižšie uvedenej smernice, aby sme k nemu pridali niektoré vlastnosti.
Výstup môžeme vizualizovať vo forme kalendára-centrického formátu dátumu. Vyššie uvedený Datepicker pridáva prispôsobené vlastnosti komponentom aplikácie React zobrazeným vyššie. Umožňuje nám vybrať dátumy vo forme mesiace, dni, a rokov .
Okrem toho na prispôsobenie nástroja na výber dátumu máme rôzne ďalšie metódy, či už ide o farbenie komponentov alebo inteligentné použitie funkcií na vyberanie dátumov. Môžeme ich tiež ľahko prispôsobiť, ak máme komponenty HTML a CSS súvisiace so súborom app.js.
Lokalizácia nástroja Datepicker
Ďalším prípadom, o ktorom sa dozvieme, je lokalizácia nástroja Datepicker. Výber dátumu, ktorý vytvoríme, vo veľkej miere závisí od internacionalizácie dátumu a fns. Ten totiž slúži na lokalizáciu prvkov, ktoré budú vystavené. Ak potrebujeme použiť miestne nastavenie okrem predvoleného en-US, možno ho budeme musieť importovať do projektu z date-fns.
Okrem toho je angličtina predvolené miestne nastavenie, ktoré pozostáva z 3 metód na nastavenie miestneho nastavenia.
registrovať miestne (reťazec, objekt): načíta importovaný objekt miestneho nastavenia z date-fns.
Nastaviť predvolené miestne nastavenie (reťazec): nastaví registrované miestne nastavenie ako predvolené pre všetky inštancie nástroja na výber dátumu.
reťazec ako pole
getDefaultLocale: vráti reťazec zobrazujúci aktuálne nastavené predvolené miestne nastavenie.
Tieto služby môžeme importovať do miestneho nastavenia zobrazenia kalendára pomocou nižšie uvedeného útržku kódu.
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) Pri importovaní a uložení týchto miestnych služieb do nášho súboru app.js bude naša aplikácia vyzerať takto.
V inom prípade, aby sme zmenili miestne nastavenia, musíme primárne zmeniť kód miestneho nastavenia alebo pomocou internacionalizácie dátumu-fns, aby mohla byť podporovaná kontrola kódu.
setDefaultLocale('es')
Nastavenie rozsahu dátumov kalendára v nástroji Datepicker.
Naučíme sa, ako implementovať funkčnosť rozsahu pomocou minDátum a vlastnosť maxDate v tomto kroku. Za týmto účelom importujeme addDays AP Ja z dátum-fns knižnice na začiatok nášho komponentu React. K priradenému dátumu pridá konkrétny počet dní na nastavenie rozsahu.
import addDays from 'date-fns/addDays'
The addDays() Metóda má zvyčajne dva parametre:
pole objektov v jave
Dátum: Dátum, ktorý je potrebné aktualizovať.
Suma: Bolo potrebné zahrnúť značné množstvo dní.
V kalendári React si jednoducho nastavíme rozsah dátumov od aktuálnych po nasledujúcich sedem dní. To možno pochopiť, keď implementujeme minDátum a maxDate metódy vo vzorovom kóde uvedenom nižšie.
render() { return ( Show Date ); } Úplný útržok kódu pre našu aplikáciu po vykonaní všetkých vyššie uvedených krokov je uvedený nižšie.
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; Vo vyššie uvedenom príklade úryvku sme vytvorili minDátum ako komponent registrácie a používateľ si môže vybrať iba dátum pred dneškom. Pre komponent odhlásenia sme použili hodnotu dátumu, čo znamená, že používateľ si nemôže vybrať dátum pred dátumom príchodu.
V ďalšom kroku uložíme hodnotu nášho stavu a zadefinujeme, ako každá rukoväť funguje. Hlavnou myšlienkou je implementovať to jednoduchým vytvorením stavu pre každého check-in a odhlásiť sa dátum s definovanými hodnotami a uloženie údajov tam. Jediný rozdiel spočíva v minDátum spôsob odbavovacej zložky, pretože závisí výlučne od odbavovacej zložky. Takže, aby sme zabezpečili, že všetko je nastavené z hľadiska hodnôt nie predtým a nie potom, môžeme teraz jednoducho vybrať dátumy a definovať odhlásenie.
Záver
V tomto návode sa nám podarilo prejsť jednoduchým podrobným návodom na vytvorenie vlastného komponentu React Datepicker, ktorý možno ľahko použiť ako náhradu za natívny komponent. Nástroj na výber dátumu HTML5 vstupné prvky. Naučili sme sa, ako nastaviť aplikáciu React na prioritu, pretože vykresľovanie komponentov React sa môže zdať pre začiatočníkov zložité, takže nastavenie závislostí by vždy preferoval začiatočník. Stretli sme sa aj s rôznymi príkladmi, aby sme vytvorili krištáľovo jasný koncept používania komponentov Datepicker v našej aplikácii. Dozvedeli sme sa tiež o procese lokalizácie nástroja na výber dátumu, aby proces výberu dátumu nespôsobil problém, ak sú v kalendári vybrané na konkrétne trvanie.
Hoci vlastný nástroj na výber dátumu vytvorený v tomto návode funguje podľa očakávania, nespĺňa všetky pokročilé požiadavky na prvok výberu dátumu. Je možné vykonať ďalšie vylepšenia, ako napríklad implementáciu max a min pomocou rekvizít, prepnutie typu vstupu z textu na dátum a zlepšenie dostupnosti. Môžeme tiež vyvinúť metódy návrhu pre výber dátumu, ktorý sme implementovali v tomto návode, importovaním balíkov Bootstrap a pridaním vlastného štýlu a vlastností vznášania, aby vyzeral lepšie.