Uvod

Pogosto naletimo na različne forume in spletne strani, kjer moramo vnesti datum rojstva ali izbrati datum za sestanek iz katerega koli razloga, pa se nam pred očmi prikaže ikona, podobna koledarju. Kako in od kod se to pojavi? To mora biti nek specifičen in dinamično podprt koledar, ki pametno prepozna in nam ponudi, da izberemo datume po naši želji. Tu nastopi React Date Picker. V tej vadnici bi se učili vseh takšnih metod od začetka do napredne ravni o tem, kako so implementirane v React in kako jih je mogoče prilagoditi. Nadaljujmo z razpravo.

The Reagiraj Izbirnik datumov je uporabna in bogata komponenta, ki se uporablja za prikaz datumov v obliki pogovornega okna koledarja. Danes je običajno na voljo veliko možnosti izbirnika datuma. Vsi imajo lahko različne tehnične vidike in aplikacije. V tej vadnici se bomo posebej ukvarjali z React Date Pickerjem. Za to moramo imeti paket zanj, ki prikazuje čas in datum. Za boljše razumevanje bomo naredili aplikacijo, ki nam bo pomagala bolje razumeti React Date Picker. Pred tem pa ga namestimo, kot je prikazano v spodnjih korakih.

Namestitev

Za namestitev izbirnika datumov za našo aplikacijo React moramo imeti Node.js vnaprej nameščen v našem sistemu. Čeprav ni pomembno, da imate vedno module vozlišč, je zelo priporočljivo, da jih prenesete, da bodo vse odvisnosti učinkovito oskrbovane. Zato je ukaz za namestitev React Date Picker podan spodaj.

Paket lahko namestite prek npm:

stoji

 npm install react-datepicker --save 

Ali prek Preja:

 yarn add react-datepicker 

Lahko se pojavi potreba po namestitvi Reacta in njegovih Proptypes posebej, ker je brez teh odvisnosti nemogoče zgraditi React Date Picker. Prav tako bomo morda morali uporabiti CSS iz zunanjih paketov, da bo izbirnik datumov videti vizualno odličen. Če želite začeti z našo aplikacijo, moramo uvoziti izbirnik datuma React v našo glavno datoteko in jo moramo nenehno preverjati prek pogleda 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)} /> ); }; 

React Datepicker primer

Ob predpostavki, da je naš sistem konfiguriran z vsemi namestitvenimi zahtevami in odvisnostmi, se bomo naučili ustvariti aplikacijo React iz nič. Ta izvedba v celoti temelji na aplikaciji React datepicker.

V zgornji razpravi predvidevamo, da smo React in PropTypes namestili neodvisno, saj te odvisnosti niso vključene v sam paket. Če želite nadaljevati z metodami gradnje naše aplikacije, moramo slediti spodnjim korakom.

 npx create-react-app react-datepicker-app 

Z ukazom se premaknite znotraj mape projekta.

 cd react-datepicker-app 

Zaženite aplikacijo React.

 npm start 

Ko je motor Node zagnan, lahko našo aplikacijo preverimo prek številke vrat 3000 lokalnega gostitelja. Poleg tega moramo v našo datoteko app.js vključiti spodnji delček kode, da bodo pomembne komponente za React Date Picker uvožene v našo datoteko.

 // 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 aplikacija bi zdaj izgledala nekako takole.

V zgornjem kodiranem vzorcu smo najprej uvozili pakete Izbirnik datuma in Bootstrap v predlogi React. Nato smo ga definirali za povezovanje sprememba ročaja in oddajte komponento v koledar dogodkov. Ti dogodki se bodo samodejno sprožili, ko bo uporabnik predložil ali spremenil vrednosti vhodne vrednosti Datepickerja. Kasneje smo inicializirali stanje obrazca Datepicker z novim datum() predmet znotraj konstruktorja. Nazadnje smo sprožili Datepicker s spodnjo direktivo, da bi mu dodali nekaj lastnosti.

Izhod lahko vizualiziramo v obliki formata izbirnika datumov, osredotočenega na koledar. Zgoraj navedeni Datepicker doda prilagojene lastnosti zgoraj prikazanim komponentam aplikacije React. Omogoča nam izbiro datumov v obliki meseci, dnevi, in leta .

Poleg tega imamo za prilagoditev izbirnika datumov na voljo različne druge metode, pa naj gre za barvanje komponent ali pametno uporabo funkcij za izbiranje datumov. Prav tako jih lahko enostavno prilagodimo, če imamo komponente HTML in CSS, povezane z datoteko app.js.

arraylist v Javi

Lokalizacija orodja Datepicker

Drug primer, o katerem se bomo naučili, je lokalizacija orodja Datepicker. Izbirnik datumov, ki ga bomo naredili, je zelo odvisen od internacionalizacije date-fns. To je zato, ker se uporablja za lokalizacijo elementov, ki bodo prikazani. Če moramo uporabiti jezik, razen privzetega en-US, ga bomo morda morali uvoziti v projekt iz date-fns.

Poleg tega je angleščina privzeta področna nastavitev, ki jo sestavljajo 3 metode za nastavitev področne nastavitve.

registrirati lokalno (niz, predmet): naloži uvožen objekt področne nastavitve iz date-fns.

Nastavite privzete lokalne nastavitve (niz): nastavi registrirano področno nastavitev kot privzeto za vse primerke izbirnika datumov.

niz kot niz

getDefaultLocale: vrne niz, ki prikazuje trenutno nastavljene privzete področne nastavitve.

Te storitve lahko uvozimo v področne nastavitve pogleda koledarja z uporabo spodnjega izrezka kode.

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

Ko te področne storitve uvozimo in shranimo v datoteko app.js, bo naša aplikacija videti takole.

V drugem primeru moramo za spremembo področnih nastavitev spremeniti predvsem področno kodo ali z uporabo internacionalizacije date-fns, da bo lahko podprt pregled kode.

 setDefaultLocale('es') 

Nastavitev časovnega obdobja koledarja v Datepickerju.

Naučili se bomo, kako implementirati funkcijo obsega z uporabo minDatum in lastnost maxDate v tem koraku. Da bi to naredili, uvozimo addDays AP Jaz iz datum-fns knjižnico na vrh naše komponente React. Dodeljenemu datumu bo dodal določeno število dni za nastavitev obsega.

 import addDays from 'date-fns/addDays' 

The addDays() metoda običajno zavzame dva parametra:

seznam pikado

Datum: Datum, ki ga je treba posodobiti.

znesek: Vključiti je bilo treba veliko število dni.

V koledarju React enostavno nastavimo časovno obdobje od trenutnih do naslednjih sedem dni. To lahko razumemo, ko izvajamo minDate in maxDate metode v primeru kode, prikazanem spodaj.

 render() { return ( Show Date ); } 

Celoten delček kode za našo aplikacijo po izvedbi vseh zgoraj navedenih korakov je prikazan spodaj.

 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; 

V zgornjem primeru izrezka smo naredili minDate kot komponenta prijave, uporabnik pa lahko izbere samo datum pred današnjim dnem. Za komponento odjave smo uporabili vrednost datuma, kar pomeni, da uporabnik ne more izbrati datuma pred datumom prijave.

V naslednjem koraku bomo shranili vrednost našega stanja in določili, kako deluje posamezen ročaj. Glavna ideja je, da jo izvedemo tako, da za vsakega preprosto ustvarimo stanje Prijava in preveri datum z definiranimi vrednostmi in shranjevanje podatkov tja. Edina razlika je v minDate način odjavne komponente, saj je odvisen izključno od odjavne komponente. Tako lahko zagotovimo, da je vse nastavljeno v smislu vrednosti ne prej in ne pozneje, zdaj pa lahko enostavno izberemo datume in določimo odjavo.

Zaključek

V tej vadnici smo lahko sledili preprostemu vodniku po korakih za izdelavo komponente po meri React Datepicker, ki jo je mogoče preprosto uporabiti kot zamenjavo za izvorno Izbirnik datumov HTML5 vhodni elementi. Naučili smo se, kako prednostno nastaviti aplikacijo React, ker se lahko upodabljanje komponent React zdi zapleteno za začetnike, zato bi začetnik vedno raje nastavil odvisnosti. Naleteli smo tudi na različne primere, da bi vzpostavili kristalno jasen koncept uporabe komponent Datepickerja v naši aplikaciji. Spoznali smo tudi postopek lokalizacije izbirnika datumov, tako da postopek izbire datuma ne povzroča težav, če so na koledarju izbrani za določen čas.

Čeprav izbirnik datumov po meri, ustvarjen v tej vadnici, deluje po pričakovanjih, ni v skladu z vsemi naprednimi zahtevami za element izbirnika datumov. Možne so nadaljnje izboljšave, kot je implementacija max in min prek rekvizitov, preklop vrste vnosa z besedila na datum in vzpostavitev boljše izboljšave dostopnosti. Prav tako lahko razvijemo metode oblikovanja za izbirnik datumov, ki smo ga implementirali v tej vadnici, tako da uvozimo pakete Bootstrap in dodamo slog po meri in lastnosti lebdenja, da bo videti bolje.