Uvod

Često naiđemo na razne forume i web stranice gdje trebamo unijeti datum rođenja ili odabrati datum za termin bilo kojeg razloga, a pred očima nam se pojavi ikona nalik na kalendar. Kako i odakle to iskače? To mora biti neki specifičan i dinamički pokretan kalendar koji pametno prepoznaje i predstavlja nam da odaberemo datume po našoj želji. Ovo je mjesto gdje React Date Picker uskače. U ovom tutorialu, učili bismo sve takve metode od nule do napredne razine o tome kako se implementira u React i kako se može prilagoditi. Nastavimo s raspravom.

The Reagirati Birač datuma korisna je i bogata komponenta koja se koristi za prikaz datuma pomoću dijaloškog formata kalendara. Danas je obično dostupno mnogo opcija za odabir datuma. Svi oni mogu imati različite tehničke aspekte i primjene. U ovom vodiču posebno ćemo se baviti React Date Pickerom. Za to nam je potreban paket koji prikazuje vrijeme i datum. Za bolje razumijevanje napravit ćemo aplikaciju koja će nam pomoći da bolje razumijemo React Date Picker. No, prije toga, instalirajmo ga kao što je prikazano u koracima u nastavku.

Montaža

Da bismo instalirali Date Picker za našu React aplikaciju, moramo imati Node.js unaprijed instaliran na našem sustavu. Iako nije važno uvijek imati module čvorova, preporučuje se njihovo preuzimanje kako bi se sve ovisnosti učinkovito opsluživale. Stoga je naredba za instalaciju React Date Pickera dana ispod.

Paket se može instalirati putem npm:

kvartala u godini

 npm install react-datepicker --save 

Ili putem Pređa:

 yarn add react-datepicker 

Moglo bi se pojaviti potreba za pojedinačnom instalacijom Reacta i njegovih Proptypes jer je, bez ovih ovisnosti, nemoguće izgraditi React Date Picker. Također, možda ćemo morati upotrijebiti CSS iz vanjskih paketa kako bi Birač datuma izgledao vizualno sjajno. Da bismo započeli s našom aplikacijom, moramo uvesti birač datuma React u našu glavnu datoteku i moramo ga stalno provjeravati kroz prikaz 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 primjer

Pod pretpostavkom da je naš sustav konfiguriran sa svim instalacijskim zahtjevima i ovisnostima, naučit ćemo kako stvoriti React aplikaciju od nule. Ova implementacija u potpunosti se temelji na primjeni React datepicker-a.

U gornjoj raspravi pretpostavljamo da smo neovisno instalirali React i PropTypes budući da te ovisnosti nisu ugrađene u sam paket. Da bismo nastavili s metodama izgradnje naše aplikacije, moramo slijediti dolje navedene korake.

 npx create-react-app react-datepicker-app 

Pomaknite se unutar mape projekta pomoću naredbe.

 cd react-datepicker-app 

Pokrenite aplikaciju React.

 npm start 

Nakon što se pokrene Node engine, možemo provjeriti svoju aplikaciju preko porta broj 3000 lokalnog hosta. Također, moramo uključiti isječak koda dat u nastavku u našu datoteku app.js tako da se važne komponente za React Date Picker uvezu u našu datoteku.

 // 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 bi aplikacija sada izgledala otprilike ovako.

U gornjem kodiranom uzorku prvo smo uvezli pakete od Birač datuma i Bootstrap u React predlošku. Zatim smo ga definirali da veže promijeniti ručku i dostavite komponentu u kalendar događaja. Ti će se događaji automatski pokrenuti kada korisnik pošalje ili promijeni vrijednosti unosa Datepicker-a. Kasnije smo inicijalizirali stanje obrasca Datepicker s novim Datum() objekt unutar konstruktora. Na kraju, pokrenuli smo Datepicker s donjom direktivom kako bismo mu dodali neka svojstva.

Izlaz možemo vizualizirati u obliku kalendarski usmjerenog formata biranja datuma. Gore navedeni Datepicker dodaje prilagođena svojstva gore prikazanim komponentama aplikacije React. Omogućuje nam odabir datuma u obliku mjeseci, dana, i godine .

greibach normalan oblik

Nadalje, za prilagodbu birača datuma imamo razne druge metode, bilo da se radi o bojanju komponenti ili pametnoj primjeni funkcija za odabir datuma. Također ih možemo jednostavno prilagoditi ako imamo HTML i CSS komponente povezane s datotekom app.js.

Lokaliziranje Datepickera

Druga instanca o kojoj ćemo naučiti jest lokalizacija Datepickera. Birač datuma koji ćemo napraviti jako ovisi o internacionalizaciji date-fns. To je zato što se koristi za lokalizaciju elemenata koji će biti prikazani. Ako trebamo koristiti lokalizaciju osim zadanog en-US, možda ćemo je morati uvesti u projekt iz date-fns.

Štoviše, engleski je zadani jezik koji se sastoji od 3 metode za postavljanje jezika.

registrirati lokalno (niz, objekt): učitava uvezeni objekt lokalizacije iz date-fns.

Postavite zadani jezik (string): postavlja registriranu lokalizaciju kao zadanu za sve instance birača datuma.

csma i csma cd

getDefaultLocale: vraća niz koji prikazuje trenutno postavljenu zadanu lokalizaciju.

Te usluge možemo uvesti u lokalizaciju prikaza kalendara pomoću donjeg isječka koda.

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

Nakon uvoza i spremanja ovih lokalnih usluga u našu datoteku app.js, naša će aplikacija izgledati ovako.

U drugom slučaju, da bismo promijenili lokalizaciju, moramo primarno promijeniti kod lokalizacije ili korištenjem internacionalizacije date-fns-a kako bi pregled koda mogao biti podržan.

 setDefaultLocale('es') 

Postavljanje datumskog raspona kalendara u Datepickeru.

Naučit ćemo kako implementirati funkcionalnost raspona pomoću minDatum i svojstvo maxDate u ovom koraku. Da bismo to učinili, uvozimo addDays AP Ja iz datum-fns biblioteku na vrh naše React komponente. Dodat će određeni broj dana dodijeljenom datumu za postavljanje raspona.

 import addDays from 'date-fns/addDays' 

The addDays() metoda obično uzima dva parametra:

Datum: Datum koji treba ažurirati.

Iznos: Trebalo je uključiti značajan broj dana.

Lako možemo postaviti datumski raspon od trenutnih do sljedećih sedam dana u React kalendaru. To se može razumjeti kada implementiramo minDatum i maxDate metode u primjeru koda prikazanom u nastavku.

 render() { return ( Show Date ); } 

Cijeli isječak koda za našu aplikaciju nakon implementacije svih gore navedenih koraka prikazan je u nastavku.

 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; 

U gornjem primjeru isječka, napravili smo minDatum kao komponenta prijave, a korisnik može odabrati samo datum prije današnjeg. Koristili smo vrijednost datuma za komponentu odjave, što znači da korisnik ne može odabrati datum prije datuma prijave.

U sljedećem koraku spremit ćemo vrijednost našeg stanja i definirati kako radi svaki handle. Glavna ideja je implementirati je jednostavnim stvaranjem države za svakoga prijava i provjeri datum s definiranim vrijednostima i tamo spremanje podataka. Jedina razlika leži u minDatum način komponente odjave, budući da ovisi isključivo o komponenti prijave. Dakle, osiguravajući da je sve postavljeno u smislu vrijednosti ne prije i ne poslije, sada možemo jednostavno odabrati datume i definirati odjavu.

java lokalni datumvrijeme

Zaključak

U ovom vodiču mogli smo slijediti jednostavan vodič korak po korak o izradi prilagođene React Datepicker komponente koja se lako može koristiti kao zamjena za nativni HTML5 birač datuma ulazni elementi. Naučili smo kako postaviti React aplikaciju na prioritet jer bi se renderiranje React komponenti moglo činiti složenim za početnike, tako da bi početnici uvijek preferirali postavljanje ovisnosti. Također smo naišli na razne primjere kako bismo uspostavili kristalno jasan koncept korištenja komponenti Datepickera u našoj aplikaciji. Također smo naučili o procesu lokalizacije birača datuma tako da postupak odabira datuma ne uzrokuje probleme ako su odabrani na određeno vrijeme u kalendaru.

Iako prilagođeni birač datuma stvoren u ovom vodiču radi prema očekivanjima, nije u skladu sa svim naprednim zahtjevima za element birača datuma. Moguća su daljnja poboljšanja, kao što je implementacija max i min putem rekvizita, prebacivanje vrste unosa s teksta na datum i uspostavljanje boljeg poboljšanja pristupačnosti. Također možemo razviti metode dizajna za birač datuma koje smo implementirali u ovom vodiču uvozom Bootstrap paketa i dodavanjem prilagođenog stila i svojstava lebdenja kako bi izgledao bolje.