Introduktion

Vi støder ofte på forskellige fora og hjemmesider, hvor vi skal indtaste vores fødselsdato eller vælge en dato for en aftale af enhver årsag, og et kalenderlignende ikon dukker op lige foran vores øjne. Hvordan og hvor dukker det op fra? Det skal være en specifik og dynamisk drevet kalender, der smart genkender og præsenterer for os for at vælge datoer efter vores ønske. Det er her, React Date Picker hopper ind. I denne tutorial vil vi lære alle sådanne metoder fra bunden til avanceret niveau om, hvordan det implementeres i React, og hvordan det kan tilpasses. Lad os fortsætte med diskussionen.

Det Reagere Datovælger er en nyttig og rigelig komponent, der bruges til at vise datoer ved hjælp af kalenderdialogformatet. Der er normalt mange valgmuligheder for datovælger i disse dage. Alle kan have forskellige tekniske aspekter og anvendelser. I denne tutorial skal vi specifikt beskæftige os med React Date Picker. Til det skal vi have en pakke til det, der viser tid og dato. For bedre forståelse vil vi lave en applikation, der vil hjælpe os med at forstå React Date Picker bedre. Men før det, lad os installere det som vist i nedenstående trin.

Installation

For at installere Date Picker til vores React-applikation skal vi have Node.js forudinstalleret på vores system. Selvom det ikke er vigtigt altid at have nodemoduler, anbefales det stærkt at downloade dem, så alle afhængigheder betjenes effektivt. Derfor er kommandoen til at installere React Date Picker givet nedenfor.

Pakken kan installeres via npm:

streng find c++

 npm install react-datepicker --save 

Eller via Garn:

 yarn add react-datepicker 

Der kan opstå et behov for at installere React og dets Proptypes individuelt, fordi uden disse afhængigheder er det umuligt at bygge en React Date Picker. Det kan også være, vi skal bruge CSS fra de eksterne pakker, så datovælgeren ser flot ud. For at komme i gang med vores applikation skal vi importere React Date-vælgeren i vores hovedfil, og vi skal blive ved med at tjekke den gennem React-visningen.

 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 eksempel

Forudsat at vores system er konfigureret med alle installationskrav og afhængigheder, vil vi lære, hvordan man opretter en React-applikation fra bunden. Denne implementering er fuldstændig baseret på anvendelsen af ​​React datepicker.

I diskussionen ovenfor antager vi, at vi har installeret React og PropTypes uafhængigt, da disse afhængigheder ikke er inkorporeret i selve pakken. For at fortsætte med metoderne til at bygge vores applikation skal vi følge nedenstående trin.

 npx create-react-app react-datepicker-app 

Flyt ind i projektmappen med kommandoen.

 cd react-datepicker-app 

Start React-appen.

 npm start 

Efter at Node-motoren er startet, kan vi tjekke vores applikation gennem portnummer 3000 på den lokale vært. Vi skal også inkludere kodestykket nedenfor i vores app.js-fil, så vigtige komponenter til React Date Picker importeres til vores fil.

download youtube video vlc

 // 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; 

Vores ansøgning ville nu se nogenlunde sådan ud.

I ovenstående kodede eksempel importerede vi først pakkerne af Datovælger og Bootstrap i React-skabelonen. Derefter definerede vi det til at binde håndtere forandring og indsend komponenten i begivenhedskalenderen. Disse hændelser vil automatisk blive udløst, når en bruger indsender eller ændrer Datepickerens inputværdiværdier. Senere initialiserede vi Datepicker-formulartilstanden med en ny Dato() objekt inde i konstruktøren. Til sidst startede vi Datepicker med nedenstående direktiv for at tilføje nogle egenskaber til det.

Vi kan visualisere outputtet i form af et kalender-centreret datepicker-format. Den ovenfor givne Datepicker tilføjer tilpassede egenskaber til React-applikationskomponenterne vist ovenfor. Det giver os mulighed for at vælge datoerne i form af måneder, dage, og flere år .

For at tilpasse datovælgeren har vi desuden forskellige andre metoder, hvad enten det er at farve komponenterne eller smart at anvende funktionerne til at hente datoerne. Vi kan også nemt tilpasse dem, hvis vi har HTML- og CSS-komponenter relateret til app.js-filen.

Lokalisering af Datepicker

Et andet eksempel, vi skal lære om, er at lokalisere Datepicker. Den datovælger, vi skal lave, afhænger i høj grad af date-fns internationalisering. Dette er fordi det bruges til at lokalisere de elementer, der vil blive vist. Hvis vi skal bruge en lokalitet bortset fra standarden en-US, skal vi muligvis importere den til projektet fra date-fns.

Desuden er engelsk standardlokaliteten, som består af 3 metoder til at indstille lokaliteten.

tilmeld dig lokalt (streng, objekt): indlæser et importeret lokalitetsobjekt fra date-fns.

Indstil standardlokalitet (streng): indstiller en registreret lokalitet som standard for alle datepicker-forekomster.

download youtube video vlc

getDefaultLocale: returnerer en streng, der viser den aktuelt indstillede standardlokalitet.

Vi kan importere disse tjenester til lokaliteten for kalendervisningen ved hjælp af nedenstående kodestykke.

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

Når du importerer og gemmer disse lokalitetstjenester i vores app.js-fil, vil vores applikation se sådan ud.

I et andet tilfælde, for at ændre lokaliteterne, skal vi primært ændre lokalitetskoden eller ved at bruge internationaliseringen af ​​date-fns, så kodegennemgangen kan understøttes.

 setDefaultLocale('es') 

Indstilling af kalenderdatointerval i Datepicker.

Vi vil lære at implementere rækkeviddefunktionaliteten vha minDatoen og maxDate egenskab i dette trin. For at gøre det importerer vi addDays AP jeg fra dato-fns biblioteket til toppen af ​​vores React-komponent. Det vil tilføje det specifikke antal dage til den tildelte dato for at indstille intervallet.

 import addDays from 'date-fns/addDays' 

Det addDays() Metoden tager normalt to parametre:

hvad er autowired i java

Dato: Den dato, der skal opdateres.

Beløb: Det betydelige antal dage skulle medregnes.

Vi kan nemt indstille datointervallet fra de nuværende til de næste syv dage i React-kalenderen. Dette kan forstås, når vi implementerer minDato og maxDato metoder i eksempelkoden vist nedenfor.

 render() { return ( Show Date ); } 

Det fulde kodestykke til vores applikation efter implementering af alle ovenstående trin er vist nedenfor.

 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; 

I ovenstående eksempeluddrag har vi lavet minDato som en check-in-komponent, og brugeren kan kun vælge datoen før i dag. Vi har brugt datoværdien for udtjekningskomponenten, hvilket betyder, at brugeren ikke kan vælge en dato før indtjekningsdatoen.

I det næste trin vil vi gemme værdien af ​​vores stat og definere, hvordan hvert håndtag fungerer. Hovedideen er at implementere det ved blot at skabe en stat for hver check-in og check-out dato med de definerede værdier og gemme dataene der. Den eneste forskel ligger i minDato metode for check-out komponenten, da den udelukkende er afhængig af check-in komponenten. For at sikre, at alt er indstillet i form af værdier ikke før og ikke efter, kan vi nu nemt vælge datoer og definere check-out.

Konklusion

I denne tutorial har vi været i stand til at følge en simpel trin-for-trin guide til at bygge en brugerdefineret React Datepicker-komponent, der nemt kan bruges som en erstatning for den indfødte HTML5 datovælger input elementer. Vi har lært, hvordan man opsætter React-applikationen på prioritet, fordi gengivelse af React-komponenterne kan virke kompleks for begyndere, så opsætning af afhængigheder vil altid være foretrukket af en nybegynder. Vi stødte også på forskellige eksempler for at etablere et krystalklart koncept for at bruge komponenterne i Datepicker i vores applikation. Vi lærte også om processen med at lokalisere datovælgeren, så datovalgsprocessen ikke forårsager et problem, hvis de er valgt i en bestemt varighed i kalenderen.

Selvom den brugerdefinerede datepicker, der er oprettet i denne øvelse, fungerer som forventet, overholder den ikke alle de avancerede krav til et datepicker-element. Der kan foretages yderligere forbedringer, såsom implementering af max og min via rekvisitter, skift af inputtype fra tekst til dato og etablering af bedre tilgængelighedsforbedring. Vi kan også udvikle designmetoder til datepickeren, som vi implementerede i denne tutorial ved at importere Bootstrap-pakker og tilføje brugerdefineret styling og egenskaber ved at svæve for at få det til at se mere godt ud.