Introduktion

Vi stöter ofta på olika forum och webbplatser där vi behöver ange vårt födelsedatum eller välja ett datum för ett möte oavsett orsak, och en kalenderliknande ikon dyker upp mitt framför våra ögon. Hur och var kommer det upp ifrån? Det måste vara någon specifik och dynamiskt driven kalender som smart känner igen och presenterar för oss för att välja datum efter vår önskan. Det är här React Date Picker hoppar in. I den här handledningen skulle vi lära oss alla sådana metoder från början till avancerad nivå om hur det implementeras i React och hur det kan anpassas. Låt oss fortsätta med diskussionen.

De Reagera Datumväljaren är en användbar och riklig komponent som används för att visa datum med hjälp av kalenderdialogformatet. Det finns vanligtvis många alternativ för datumväljare nu för tiden. Alla kan ha olika tekniska aspekter och tillämpningar. I den här handledningen kommer vi specifikt att ta itu med React Date Picker. För det måste vi ha ett paket för det som visar tid och datum. För bättre förståelse kommer vi att göra en applikation som skulle hjälpa oss att förstå React Date Picker bättre. Men innan dess, låt oss installera det som visas i stegen nedan.

Installation

För att installera Date Picker för vår React-applikation måste vi ha Node.js förinstallerat på vårt system. Även om det inte är viktigt att alltid ha nodmoduler, rekommenderas det starkt att ladda ner dem så att alla beroenden betjänas effektivt. Därför ges kommandot för att installera React Date Picker nedan.

Paketet kan installeras via npm:

list.sort java

 npm install react-datepicker --save 

Eller via Garn:

 yarn add react-datepicker 

Det kan uppstå ett behov av att installera React och dess Proptypes individuellt eftersom det utan dessa beroenden är omöjligt att bygga en React Date Picker. Dessutom kan vi behöva använda CSS från de externa paketen så att datumväljaren ser bra ut visuellt. För att komma igång med vår applikation måste vi importera React Date-väljaren i vår huvudfil, och vi måste fortsätta kontrollera den genom React-vyn.

 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-exempel

Förutsatt att vårt system är konfigurerat med alla installationskrav och beroenden kommer vi att lära oss hur man skapar en React-applikation från början. Denna implementering är helt baserad på tillämpningen av React datepicker.

I diskussionen ovan antar vi att vi har installerat React och PropTypes oberoende eftersom dessa beroenden inte är inkorporerade i själva paketet. För att fortsätta med metoderna för att bygga vår applikation måste vi följa stegen nedan.

 npx create-react-app react-datepicker-app 

Flytta in i projektmappen med kommandot.

 cd react-datepicker-app 

Starta React-appen.

 npm start 

Efter att Node-motorn har startat kan vi kontrollera vår applikation via portnummer 3000 för den lokala värden. Dessutom måste vi inkludera kodavsnittet nedan i vår app.js-fil så att viktiga komponenter för React Date Picker importeras till vår fil.

 // 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 ansökan skulle nu se ut ungefär så här.

I ovanstående exempelkodade importerade vi först paketen av Datumväljare och Bootstrap i React-mallen. Sedan definierade vi det för att binda hantera förändring och skicka in komponenten i evenemangskalendern. Dessa händelser kommer automatiskt att utlösas när en användare skickar in eller ändrar Datepickers indatavärden. Senare initierade vi Datepicker-formulärtillståndet med ett nytt Datum() objekt inuti konstruktorn. Slutligen initierade vi Datepicker med nedanstående direktiv för att lägga till några egenskaper till den.

Vi kan visualisera resultatet i form av ett kalendercentrerat datumväljarformat. Ovan givna Datepicker lägger till anpassade egenskaper till React-applikationskomponenterna som visas ovan. Det gör att vi kan välja datum i form av månader, dagar, och år .

Dessutom, för att anpassa datumväljaren, har vi olika andra metoder, vare sig det är att färga komponenterna eller smart tillämpa funktionerna för att plocka upp datumen. Vi kan också enkelt anpassa dem om vi har HTML- och CSS-komponenter relaterade till filen app.js.

statisk funktion i java

Lokalisera Datepicker

Ett annat exempel som vi kommer att lära oss om är att lokalisera Datepicker. Datumväljaren vi kommer att göra beror mycket på date-fns internationalisering. Detta beror på att det används för att lokalisera de element som kommer att visas. Om vi ​​behöver använda en locale förutom standarden en-US, kan vi behöva importera den till projektet från date-fns.

Dessutom är engelska standardspråket som består av 3 metoder för att ställa in språket.

registrera lokalt (sträng, objekt): laddar ett importerat lokalobjekt från date-fns.

Ställ in standardspråk (sträng): ställer in en registrerad lokalitet som standard för alla datepicker-instanser.

dela en sträng i c++

getDefaultLocale: returnerar en sträng som visar den för närvarande inställda standardlokalen.

Vi kan importera dessa tjänster till platsen för kalendervyn med hjälp av kodavsnittet nedan.

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

När du importerar och sparar dessa språktjänster i vår app.js-fil kommer vår applikation att se ut så här.

I ett annat fall, för att ändra lokalerna, måste vi i första hand ändra lokalkoden eller genom att använda internationaliseringen av date-fns så att kodgranskningen kan stödjas.

 setDefaultLocale('es') 

Ställa in kalenderdatumintervall i Datepicker.

Vi kommer att lära oss hur man implementerar intervallfunktionen med hjälp av minDatum och egenskapen maxDate i detta steg. För att göra det importerar vi addDays AP jag från datum-fns biblioteket till toppen av vår React-komponent. Det kommer att lägga till det specifika antalet dagar till det tilldelade datumet för att ställa in intervallet.

 import addDays from 'date-fns/addDays' 

De addDays() Metoden tar vanligtvis två parametrar:

java lägg till sträng

Datum: Datumet som behöver uppdateras.

Belopp: Det betydande antal dagar som behövde inkluderas.

Vi kan enkelt ställa in datumintervallet från nuvarande till nästa sju dagar i React-kalendern. Detta kan förstås när vi implementerar minDatum och maxDatum metoder i exempelkoden som visas nedan.

 render() { return ( Show Date ); } 

Det fullständiga kodavsnittet för vår applikation efter att ha implementerat alla steg ovan visas nedan.

 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 exemplet ovan har vi gjort minDatum som en incheckningskomponent, och användaren kan endast välja datum före idag. Vi har använt datumvärdet för utcheckningskomponenten, vilket innebär att användaren inte kan välja ett datum före incheckningsdatumet.

I nästa steg kommer vi att spara värdet på vår stat och definiera hur varje handtag fungerar. Huvudtanken är att implementera det genom att helt enkelt skapa en stat för var och en checka in och kolla upp datum med de definierade värdena och spara data där. Den enda skillnaden ligger i minDatum metod för utcheckningskomponenten, eftersom den enbart är beroende av incheckningskomponenten. För att säkerställa att allt är inställt i termer av värden inte före och inte efter, kan vi nu enkelt välja datum och definiera utcheckningen.

Slutsats

I den här handledningen har vi kunnat följa en enkel steg-för-steg-guide för att bygga en anpassad React Datepicker-komponent som enkelt kan användas som en ersättning för den infödda HTML5 datumväljare ingångselement. Vi har lärt oss hur man ställer in React-applikationen på prioritet eftersom att rendera React-komponenterna kan verka komplicerat för nybörjare, så att ställa in beroenden skulle alltid föredras av en nybörjare. Vi stötte också på olika exempel för att etablera ett kristallklart koncept för att använda komponenterna i Datepicker i vår applikation. Vi lärde oss också om processen att lokalisera datumväljaren så att datumvalsprocessen inte orsakar problem om de väljs under en viss varaktighet i kalendern.

Även om den anpassade datumväljaren som skapats i den här handledningen fungerar som förväntat, uppfyller den inte alla avancerade krav för ett datumväljare-element. Ytterligare förbättringar kan göras, som att implementera max och min via rekvisita, byta inmatningstyp från text till datum och skapa bättre tillgänglighetsförbättringar. Vi kan också utveckla designmetoder för datumväljaren som vi implementerade i den här handledningen genom att importera Bootstrap-paket och lägga till anpassad stil och egenskaper för att sväva för att få det att se snyggare ut.