Introducere

De multe ori întâlnim diverse forumuri și site-uri web în care trebuie să introducem data nașterii sau să selectăm o dată pentru o programare de orice cauză, iar o pictogramă asemănătoare unui calendar apare chiar în fața ochilor noștri. Cum și de unde apare asta? Trebuie să fie un calendar specific și dinamic, care să recunoască inteligent și să ne prezinte pentru a selecta datele dorite. Aici intervine React Date Picker. În acest tutorial, am învăța toate aceste metode de la zero până la nivel avansat despre cum este implementat în React și cum poate fi personalizat. Să continuăm cu discuția.

The Reacţiona Date Picker este o componentă utilă și abundentă folosită pentru a afișa datele folosind formatul de dialog calendar. Există, de obicei, o mulțime de opțiuni de selecție de date disponibile în aceste zile. Toate pot avea diferite aspecte tehnice și aplicații. În acest tutorial, ne vom ocupa în mod special de React Date Picker. Pentru asta, trebuie să avem un pachet care să afișeze ora și data. Pentru o mai bună înțelegere, vom realiza o aplicație care ne-ar ajuta să înțelegem mai bine React Date Picker. Dar, înainte de asta, să-l instalăm așa cum se arată în pașii de mai jos.

Instalare

Pentru a instala Date Picker pentru aplicația noastră React, trebuie să avem Node.js preinstalat pe sistemul nostru. Deși nu este important să aveți întotdeauna module de noduri, este foarte recomandat să le descărcați, astfel încât toate dependențele să fie servite eficient. Prin urmare, comanda pentru a instala React Date Picker este dată mai jos.

Pachetul poate fi instalat prin npm:

np.argmax

 npm install react-datepicker --save 

Sau prin Fire:

 yarn add react-datepicker 

S-ar putea să apară nevoia de a instala React și Proptypes-urile sale individual, deoarece, fără aceste dependențe, este imposibil să construiți un React Date Picker. De asemenea, ar putea fi nevoie să folosim CSS din pachetele externe, astfel încât Selectorul de date să arate excelent vizual. Pentru a începe cu aplicația noastră, trebuie să importam selectorul de date React în fișierul nostru principal și trebuie să-l verificăm în continuare prin vizualizarea 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)} /> ); }; 

Exemplu React Datepicker

Presupunând că sistemul nostru este configurat cu toate cerințele și dependențele de instalare, vom învăța cum să creăm o aplicație React de la zero. Această implementare se bazează complet pe aplicarea datepickerului React.

În discuția de mai sus, presupunem că am instalat React și PropTypes independent, deoarece aceste dependențe nu sunt încorporate în pachetul în sine. Pentru a continua cu metodele de construire a aplicației noastre, trebuie să urmam pașii de mai jos.

 npx create-react-app react-datepicker-app 

Deplasați-vă în folderul proiectului cu comanda.

 cd react-datepicker-app 

Porniți aplicația React.

 npm start 

După ce motorul Node este pornit, ne putem verifica aplicația prin numărul portului 3000 al gazdei locale. De asemenea, trebuie să includem fragmentul de cod prezentat mai jos în fișierul nostru app.js, astfel încât componentele importante pentru React Date Picker să fie importate în fișierul nostru.

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

Aplicația noastră ar arăta acum cam așa.

k cel mai apropiat vecin

În eșantionul codificat de mai sus, am importat mai întâi pachetele de Selector de date și Bootstrap în șablonul React. Apoi, l-am definit pentru a lega gestionează schimbarea și trimiteți Componenta în calendarul evenimentelor. Aceste evenimente vor fi declanșate automat atunci când un utilizator trimite sau modifică valorile de intrare ale Datepicker. Mai târziu, am inițializat starea formularului Datepicker cu un nou Data() obiect din interiorul constructorului. În cele din urmă, am inițiat Datepicker cu directiva de mai jos pentru a-i adăuga câteva proprietăți.

Putem vizualiza rezultatul sub forma unui format de date selector centrat pe calendar. Datepicker-ul de mai sus adaugă proprietăți personalizate componentelor aplicației React prezentate mai sus. Ne permite să alegem datele sub formă de luni, zile, și ani .

În plus, pentru a personaliza selectorul de date, avem diverse alte metode, fie că este vorba de colorarea componentelor sau de aplicarea inteligentă a funcțiilor pentru a ridica datele. De asemenea, le putem personaliza cu ușurință dacă avem componente HTML și CSS legate de fișierul app.js.

Localizarea Datepicker

Un alt exemplu despre care vom afla este localizarea Datepicker. Selectorul de date pe care îl vom face depinde în mare măsură de internaționalizarea date-fns. Acest lucru se datorează faptului că este folosit pentru a localiza elementele care vor fi afișate. Dacă trebuie să folosim o localitate cu excepția standardului en-US, este posibil să fie nevoie să o importăm în proiect din data-fns.

Mai mult decât atât, limba engleză este limba implicită, care constă din 3 metode de setare locală.

înregistrare locală (șir, obiect): încarcă un obiect local importat din date-fns.

Setați localitatea implicită (șir): setează o locație înregistrată ca implicită pentru toate instanțele datepicker.

șir ca o matrice

getDefaultLocale: returnează un șir care arată localul implicit setat în prezent.

Putem importa aceste servicii în localitatea vizualizării calendarului folosind fragmentul de cod de mai jos.

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

La importarea și salvarea acestor servicii locale în fișierul nostru app.js, aplicația noastră va arăta astfel.

Într-un alt caz, pentru a schimba localurile, trebuie să schimbăm în primul rând codul local sau prin utilizarea internaționalizării date-fns, astfel încât revizuirea codului să poată fi acceptată.

 setDefaultLocale('es') 

Setarea intervalului de date din Calendar în Datepicker.

Vom învăța cum să implementăm funcționalitatea intervalului folosind minData și proprietate maxDate în acest pas. Pentru a face acest lucru, importăm addDays AP eu din data-fns bibliotecă în partea de sus a componentei noastre React. Acesta va adăuga un anumit număr de zile la data atribuită pentru a seta intervalul.

 import addDays from 'date-fns/addDays' 

The adauga zile() metoda ia de obicei doi parametri:

Data: Data care trebuie actualizată.

Cantitate: A trebuit inclusă cantitatea semnificativă de zile.

xor cpp

Putem seta cu ușurință intervalul de date de la curent la următoarele șapte zile în calendarul React. Acest lucru poate fi înțeles atunci când implementăm minDate și maxDate metode din exemplul de cod prezentat mai jos.

 render() { return ( Show Date ); } 

Fragmentul de cod complet pentru aplicația noastră după implementarea tuturor pașilor indicați mai sus este prezentat mai jos.

 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; 

În fragmentul de exemplu de mai sus, am făcut minDate ca componentă de check-in, iar utilizatorul poate alege doar data anterioară zilei de astăzi. Am folosit valoarea datei pentru Componenta de check-out, ceea ce înseamnă că utilizatorul nu poate alege o dată înainte de data de check-in.

În pasul următor, vom salva valoarea stării noastre și vom defini modul în care funcționează fiecare mâner. Ideea principală este să o implementezi prin simpla creare a unei stări pentru fiecare check-in și verifică data cu valorile definite și salvarea datelor acolo. Singura diferență constă în minDate metoda componentei de check-out, deoarece depinde exclusiv de componenta de check-in. Astfel, asigurându-ne că totul este setat în termeni de valori nu înainte și nu după, putem acum să selectăm cu ușurință datele și să definim check-out-ul.

Concluzie

În acest tutorial, am reușit să urmăm un ghid simplu pas cu pas despre construirea unei componente personalizate React Datepicker care poate fi utilizată cu ușurință ca înlocuitor pentru nativ. Selector de date HTML5 elemente de intrare. Am învățat cum să setăm aplicația React cu prioritate, deoarece redarea componentelor React poate părea complexă pentru începători, așa că configurarea dependențelor ar fi întotdeauna preferată de un începător. De asemenea, am găsit diverse exemple pentru a stabili un concept clar de cristal al utilizării componentelor Datepicker în aplicația noastră. Am aflat, de asemenea, despre procesul de localizare a selectorului de date, astfel încât procesul de selecție a datei să nu cauzeze o problemă dacă sunt selectați pentru o anumită durată în calendar.

Deși selectorul de date personalizat creat în acest tutorial funcționează conform așteptărilor, nu respectă toate cerințele avansate pentru un element de selecție de date. Se pot face îmbunătățiri suplimentare, cum ar fi implementarea maximă și minimă prin elemente de recuzită, comutarea tipului de intrare de la text la data actuală și stabilirea unei îmbunătățiri mai bune a accesibilității. De asemenea, putem dezvolta metode de proiectare pentru datapicker-ul pe care l-am implementat în acest tutorial, importând pachete Bootstrap și adăugând stil personalizat și proprietăți de hovering pentru a-l face să arate mai bine.