Invoering

We komen vaak verschillende forums en websites tegen waar we onze geboortedatum moeten invoeren of een datum moeten selecteren voor een afspraak om welke reden dan ook, en er verschijnt een kalenderachtig pictogram recht voor onze ogen. Hoe en waar komt dat vandaan? Het moet een specifieke en dynamisch aangedreven kalender zijn die ons op slimme wijze herkent en presenteert om data van onze wens te selecteren. Dit is waar React Date Picker in beeld komt. In deze tutorial leren we al deze methoden van nul tot geavanceerd niveau over hoe het wordt geïmplementeerd in React en hoe het kan worden aangepast. Laten we doorgaan met de discussie.

De Reageer Datumkiezer is een nuttige en overvloedige component die wordt gebruikt om datums weer te geven met behulp van het kalenderdialoogformaat. Er zijn tegenwoordig meestal veel datumkiezeropties beschikbaar. Ze kunnen allemaal verschillende technische aspecten en toepassingen hebben. In deze tutorial gaan we specifiek in op React Date Picker. Daarvoor hebben we er een pakket voor nodig dat tijd en datum weergeeft. Voor een beter begrip zullen we een applicatie maken die ons zou helpen React Date Picker beter te begrijpen. Maar laten we het eerst installeren zoals weergegeven in de onderstaande stappen.

Installatie

Om Date Picker voor onze React-applicatie te installeren, moeten we Node.js vooraf op ons systeem hebben geïnstalleerd. Hoewel het niet belangrijk is om altijd knooppuntmodules te hebben, wordt het ten zeerste aanbevolen om deze te downloaden, zodat alle afhankelijkheden efficiënt worden bediend. Daarom wordt hieronder de opdracht gegeven om React Date Picker te installeren.

Het pakket kan worden geïnstalleerd via npm:

Sara Ali Khan leeftijd

 npm install react-datepicker --save 

Of via Garen:

 yarn add react-datepicker 

Het kan nodig zijn om React en zijn Proptypes afzonderlijk te installeren, omdat het zonder deze afhankelijkheden onmogelijk is om een ​​React Date Picker te bouwen. Mogelijk moeten we ook CSS uit de externe pakketten gebruiken, zodat de Datumkiezer er visueel goed uitziet. Om aan de slag te gaan met onze applicatie, moeten we de React Date-kiezer in ons hoofdbestand importeren, en we moeten deze blijven controleren via de React-weergave.

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

Reageer Datepicker voorbeeld

Ervan uitgaande dat ons systeem is geconfigureerd met alle installatievereisten en afhankelijkheden, zullen we leren hoe we een React-applicatie helemaal opnieuw kunnen maken. Deze implementatie is volledig gebaseerd op de toepassing van React datepicker.

In de bovenstaande discussie gaan we ervan uit dat we React en PropTypes onafhankelijk van elkaar hebben geïnstalleerd, aangezien deze afhankelijkheden niet in het pakket zelf zijn opgenomen. Om door te gaan met de methoden voor het bouwen van onze applicatie, moeten we de onderstaande stappen volgen.

 npx create-react-app react-datepicker-app 

Ga binnen de projectmap met de opdracht.

 cd react-datepicker-app 

Start de React-app.

 npm start 

Nadat de Node-engine is gestart, kunnen we onze applicatie controleren via poortnummer 3000 van de localhost. We moeten ook het onderstaande codefragment opnemen in ons app.js-bestand, zodat belangrijke componenten voor React Date Picker in ons bestand worden geïmporteerd.

conversie van int naar string in 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; 

Onze applicatie zou er nu ongeveer zo uitzien.

In het bovenstaande gecodeerde voorbeeld importeerden we eerst de pakketten van Datumkiezer En Bootstrap in de React-sjabloon. Vervolgens hebben we het gedefinieerd om de omgaan met verandering en dien het onderdeel in de evenementenkalender in. Deze gebeurtenissen worden automatisch geactiveerd wanneer een gebruiker de invoerwaardewaarden van de Datepicker indient of wijzigt. Later hebben we de Datepicker-formulierstatus geïnitialiseerd met een new Datum() object binnen de constructor. Ten slotte hebben we de Datepicker gestart met de onderstaande richtlijn om er enkele eigenschappen aan toe te voegen.

We kunnen de uitvoer visualiseren in de vorm van een kalendergericht datumkiezerformaat. De hierboven gegeven Datepicker voegt aangepaste eigenschappen toe aan de hierboven weergegeven React-applicatiecomponenten. Hiermee kunnen we de datums kiezen in de vorm van maanden, dagen, En jaren .

Bovendien hebben we verschillende andere methoden om de datumkiezer aan te passen, of het nu gaat om het kleuren van de componenten of het slim toepassen van de functies om de datums op te halen. We kunnen ze ook gemakkelijk aanpassen als we HTML- en CSS-componenten hebben die verband houden met het app.js-bestand.

De datumkiezer lokaliseren

Een ander voorbeeld waar we over gaan leren is het lokaliseren van de Datepicker. De Date Picker die we gaan maken, is sterk afhankelijk van de internationalisering van date-fns. Dit komt omdat het wordt gebruikt om de elementen te lokaliseren die worden getoond. Als we een landinstelling moeten gebruiken behalve de standaard en-US, moeten we deze mogelijk vanuit de date-fns in het project importeren.

Bovendien is Engels de standaardlandinstelling, die uit 3 methoden bestaat om de landinstelling in te stellen.

lokaal inschrijven (string, object): laadt een geïmporteerd locale-object uit date-fns.

Stel de standaardlandinstelling in (string): stelt een geregistreerde landinstelling in als standaard voor alle datepicker-instanties.

download youtube-video vlc

getDefaultLocale: retourneert een tekenreeks die de momenteel ingestelde standaardlandinstelling weergeeft.

We kunnen deze services importeren naar de landinstelling van de kalenderweergave met behulp van het onderstaande codefragment.

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

Bij het importeren en opslaan van deze locale-services in ons app.js-bestand zal onze applicatie er als volgt uitzien.

In een ander geval moeten we, om de landinstellingen te wijzigen, in de eerste plaats de landcode wijzigen of door de internationalisering van de date-fns te gebruiken, zodat de codebeoordeling kan worden ondersteund.

 setDefaultLocale('es') 

Kalenderdatumbereik instellen in Datumkiezer.

We zullen leren hoe u de bereikfunctionaliteit kunt implementeren met behulp van de minDatum En maxDate-eigenschap in deze stap. Om dit te doen, importeren wij de addDays AP ik van de datum-fns bibliotheek naar de bovenkant van onze React-component. Het voegt het specifieke aantal dagen toe aan de toegewezen datum om het bereik in te stellen.

 import addDays from 'date-fns/addDays' 

De addDays() methode heeft meestal twee parameters nodig:

java heeft geext

Datum: De datum die moet worden bijgewerkt.

Hoeveelheid: Het aanzienlijke aantal dagen moest worden meegeteld.

We kunnen eenvoudig het datumbereik instellen van de huidige tot de volgende zeven dagen in de React-kalender. Dit kan worden begrepen wanneer we de minDatum En maxDatum methoden in de onderstaande voorbeeldcode.

 render() { return ( Show Date ); } 

Het volledige codefragment voor onze applicatie na het implementeren van alle bovenstaande stappen wordt hieronder weergegeven.

 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; 

In het bovenstaande voorbeeldfragment hebben we gemaakt minDatum als incheckcomponent, en de gebruiker kan alleen de datum vóór vandaag kiezen. We hebben de datumwaarde gebruikt voor de uitcheckcomponent, wat betekent dat de gebruiker geen datum kan kiezen vóór de incheckdatum.

In de volgende stap zullen we de waarde van onze staat opslaan en definiëren hoe elke handgreep werkt. Het belangrijkste idee is om het te implementeren door eenvoudigweg voor elk een staat te creëren Check in En uitchecken datum met de gedefinieerde waarden en sla de gegevens daar op. Het enige verschil ligt in de minDatum methode van de uitcheckcomponent, aangezien deze uitsluitend afhankelijk is van de incheckcomponent. Om ervoor te zorgen dat alles is ingesteld in termen van waarden, niet ervoor en niet erna, kunnen we nu eenvoudig de datums selecteren en het uitchecken definiëren.

Conclusie

In deze zelfstudie hebben we een eenvoudige stapsgewijze handleiding kunnen volgen voor het bouwen van een aangepaste React Datepicker-component die eenvoudig kan worden gebruikt als vervanging voor de oorspronkelijke component HTML5-datumkiezer invoerelementen. We hebben geleerd hoe we de React-applicatie op prioriteit kunnen instellen, omdat het renderen van de React-componenten voor beginners misschien ingewikkeld lijkt, dus het instellen van afhankelijkheden zou altijd de voorkeur hebben van een beginner. We kwamen ook verschillende voorbeelden tegen om een ​​glashelder concept op te stellen voor het gebruik van de componenten van Datepicker in onze applicatie. We hebben ook geleerd over het proces van het lokaliseren van de datumkiezer, zodat het datumselectieproces geen problemen veroorzaakt als ze voor een bepaalde duur op de kalender worden geselecteerd.

Hoewel de aangepaste datumkiezer die in deze zelfstudie is gemaakt naar verwachting werkt, voldoet deze niet aan alle geavanceerde vereisten voor een datumkiezerelement. Er kunnen verdere verbeteringen worden aangebracht, zoals het implementeren van de max en min via rekwisieten, het omschakelen van het invoertype van tekst naar datum en het bewerkstelligen van een betere toegankelijkheidsverbetering. We kunnen ook ontwerpmethoden ontwikkelen voor de datepicker die we in deze zelfstudie hebben geïmplementeerd door Bootstrap-pakketten te importeren en aangepaste stijl en eigenschappen van zweven toe te voegen om het er beter uit te laten zien.