Introduksjon
Vi kommer ofte over ulike fora og nettsteder der vi må angi fødselsdatoen vår eller velge en dato for en avtale uansett årsak, og et kalenderlignende ikon vises rett foran øynene våre. Hvordan og hvor kommer det opp fra? Det må være en spesifikk og dynamisk drevet kalender som smart gjenkjenner og presenterer for oss for å velge datoer etter vårt ønske. Det er her React Date Picker hopper inn. I denne opplæringen vil vi lære alle slike metoder fra bunnen av til avansert nivå om hvordan det implementeres i React og hvordan det kan tilpasses. La oss fortsette med diskusjonen.
De Reagere Datovelger er en nyttig og rikelig komponent som brukes til å vise datoer ved hjelp av kalenderdialogformatet. Det er vanligvis mange alternativer for datovelger tilgjengelig i disse dager. Alle kan ha forskjellige tekniske aspekter og bruksområder. I denne opplæringen skal vi spesifikt håndtere React Date Picker. For det må vi ha en pakke for det som viser tid og dato. For bedre forståelse vil vi lage en applikasjon som vil hjelpe oss å forstå React Date Picker bedre. Men før det, la oss installere det som vist i trinnene nedenfor.
Installasjon
For å installere Date Picker for vår React-applikasjon, må vi ha Node.js forhåndsinstallert på systemet vårt. Selv om det ikke er viktig å alltid ha nodemoduler, anbefales det sterkt å laste dem ned slik at alle avhengighetene betjenes effektivt. Derfor er kommandoen for å installere React Date Picker gitt nedenfor.
Pakken kan installeres via npm:
strengfinn c++
npm install react-datepicker --save
Eller via Garn:
yarn add react-datepicker
Det kan oppstå et behov for å installere React og dens Proptypes individuelt fordi uten disse avhengighetene er det umulig å bygge en React Date Picker. Det kan også hende vi må bruke CSS fra de eksterne pakkene slik at datovelgeren ser flott ut. For å komme i gang med applikasjonen vår må vi importere React Date-velgeren i hovedfilen vår, og vi må fortsette å sjekke den gjennom 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)} /> ); }; Reager Datepicker eksempel
Forutsatt at systemet vårt er konfigurert med alle installasjonskrav og avhengigheter, vil vi lære hvordan du oppretter en React-applikasjon fra bunnen av. Denne implementeringen er fullstendig basert på bruken av React datepicker.
I diskusjonen ovenfor antar vi at vi har installert React og PropTypes uavhengig siden disse avhengighetene ikke er innlemmet i selve pakken. For å fortsette med metodene for å bygge applikasjonen vår, må vi følge trinnene nedenfor.
npx create-react-app react-datepicker-app
Flytt inn i prosjektmappen med kommandoen.
cd react-datepicker-app
Start React-appen.
npm start
Etter at Node-motoren er startet, kan vi sjekke applikasjonen vår gjennom portnummer 3000 til den lokale verten. Vi må også inkludere kodebiten gitt nedenfor i app.js-filen vår, slik at viktige komponenter for React Date Picker importeres til filen vår.
hvordan få iphone-emojis på Android
// 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; Vår søknad vil nå se omtrent slik ut.
I eksemplet ovenfor importerte vi først pakkene med Datovelger og Støvelhempe i React-malen. Deretter definerte vi det for å binde håndtere endring og send inn komponenten i arrangementskalenderen. Disse hendelsene vil automatisk utløses når en bruker sender inn eller endrer Datepicker-verdiene. Senere initialiserte vi Datepicker-skjematilstanden med en ny Dato() objekt inne i konstruktøren. Til slutt startet vi Datepicker med direktivet nedenfor for å legge til noen egenskaper til den.
Vi kan visualisere utdataene i form av et kalendersentrisk datepicker-format. Datepickeren ovenfor legger til tilpassede egenskaper til React-applikasjonskomponentene vist ovenfor. Det lar oss velge datoene i form av måneder, dager, og år .
Videre, for å tilpasse datovelgeren, har vi forskjellige andre metoder, enten det er å fargelegge komponentene eller smart bruke funksjonene for å plukke opp datoene. Vi kan også enkelt tilpasse dem hvis vi har HTML- og CSS-komponenter knyttet til app.js-filen.
Lokalisering av Datepicker
Et annet eksempel vi skal lære om er å lokalisere Datepicker. Datevelgeren vi skal lage avhenger sterkt av date-fns internasjonalisering. Dette er fordi det brukes til å lokalisere elementene som skal vises. Hvis vi trenger å bruke en lokalitet bortsett fra standarden en-US, må vi kanskje importere den til prosjektet fra date-fns.
Dessuten er engelsk standardlokale som består av 3 metoder for å angi lokale.
registrer deg lokalt (streng, objekt): laster inn et importert lokalitetsobjekt fra date-fns.
Angi standard lokalitet (streng): setter en registrert lokalitet som standard for alle datepicker-forekomster.
hvordan få iphone-emojis på Android
getDefaultLocale: returnerer en streng som viser gjeldende standardlokale.
Vi kan importere disse tjenestene til lokaliteten for kalendervisningen ved å bruke kodebiten nedenfor.
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) Når du importerer og lagrer disse lokalitetstjenestene i app.js-filen vår, vil applikasjonen vår se slik ut.
I et annet tilfelle, for å endre lokalitetene, må vi primært endre lokalitetskoden eller ved å bruke internasjonaliseringen av date-fns slik at kodegjennomgangen kan støttes.
setDefaultLocale('es')
Angi kalenderdatointervall i Datepicker.
Vi vil lære hvordan du implementerer rekkeviddefunksjonaliteten ved hjelp av minDatoen og maxDate-egenskapen i dette trinnet. For å gjøre det importerer vi addDays AP jeg fra dato-fns biblioteket til toppen av vår React-komponent. Det vil legge til det spesifikke antallet dager til den tildelte datoen for å angi rekkevidden.
import addDays from 'date-fns/addDays'
De addDays() Metoden tar vanligvis to parametere:
strsep c
Dato: Datoen som må oppdateres.
Beløp: Det betydelige antallet dager som måtte inkluderes.
Vi kan enkelt stille inn datointervallet fra gjeldende til de neste syv dagene i React-kalenderen. Dette kan forstås når vi implementerer minDato og maxDato metoder i eksempelkoden vist nedenfor.
render() { return ( Show Date ); } Den fullstendige kodebiten for applikasjonen vår etter implementering av alle trinnene ovenfor vises 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 eksempelet ovenfor har vi laget minDato som en innsjekkingskomponent, og brukeren kan kun velge dato før i dag. Vi har brukt datoverdien for utsjekkingskomponenten, som betyr at brukeren ikke kan velge en dato før innsjekkingsdatoen.
I neste trinn vil vi lagre verdien av staten vår og definere hvordan hvert håndtak fungerer. Hovedideen er å implementere det ved ganske enkelt å opprette en stat for hver innsjekking og Sjekk ut dato med de definerte verdiene og lagre dataene der. Den eneste forskjellen ligger i minDato metode for utsjekkingskomponenten, da den utelukkende er avhengig av innsjekkingskomponenten. For å sikre at alt er satt i form av verdier ikke før og ikke etter, kan vi nå enkelt velge datoene og definere utsjekkingen.
Konklusjon
I denne opplæringen har vi vært i stand til å følge gjennom en enkel trinn-for-trinn-veiledning for å bygge en tilpasset React Datepicker-komponent som enkelt kan brukes som en erstatning for den innfødte HTML5 datovelger inngangselementer. Vi har lært hvordan du setter opp React-applikasjonen på prioritet fordi gjengivelse av React-komponentene kan virke komplisert for nybegynnere, så å sette opp avhengigheter vil alltid foretrekkes av en nybegynner. Vi kom også over forskjellige eksempler for å etablere et krystallklart konsept for bruk av komponentene til Datepicker i applikasjonen vår. Vi lærte også om prosessen med å lokalisere datovelgeren slik at datovalgprosessen ikke forårsaker problemer hvis de velges for en bestemt varighet i kalenderen.
Selv om den tilpassede datovelgeren som er opprettet i denne opplæringen fungerer som forventet, samsvarer den ikke med alle de avanserte kravene for et dateplukkerelement. Ytterligere forbedringer kan gjøres, som å implementere maks og min via rekvisitter, bytte inndatatype fra tekst til dato, og etablere bedre tilgjengelighetsforbedring. Vi kan også utvikle designmetoder for datovelgeren som vi implementerte i denne opplæringen ved å importere Bootstrap-pakker og legge til tilpasset stil og egenskaper for sveving for å få det til å se mer bra ut.