Adăugarea unui selector de date în aplicația dvs. React.js este o modalitate excelentă de a-i îmbunătăți ușurința în utilizare. Un selector de dată permite utilizatorilor să selecteze o dată dintr-un calendar direct într-un câmp de formular, în loc să fie nevoiți să introducă data manual. Acest lucru poate îmbunătăți considerabil experiența utilizatorului aplicației dvs., făcându-le mai ușor pentru utilizatori să selecteze datele de care au nevoie.
Puteți adăuga un selector de date în aplicația dvs. React.js folosind funcții native sau cu o bibliotecă externă.
Ce este un selector de date?
Un selector de date este un element de interfață care permite unui utilizator să selecteze o dată dintr-un calendar.
De obicei, apare ca o casetă de text cu o pictogramă de calendar lângă ea, care, atunci când se dă clic, deschide un calendar care permite utilizatorului să selecteze o dată. Utilizatorul poate apoi să introducă data sau să o selecteze din calendar, în funcție de configurația aplicației.
Cum să adăugați un selector de date în aplicația dvs. React.js
Există mai multe moduri de a adăuga un selector de date în aplicația React.js. Acestea includ utilizarea funcțiilor native și integrarea bibliotecilor terțe. De asemenea, puteți adăuga funcții suplimentare la selectorul de date.
Utilizarea caracteristicilor încorporate
Puteți utilizați cârlige React și tipul nativ de introducere a datei HTML5 pentru a adăuga un selector de date în aplicația dvs. Aceasta este o modalitate simplă de a adăuga un selector de date, deoarece nu necesită biblioteci sau cod suplimentare. Cu toate acestea, are unele dezavantaje, cum ar fi limitările stilului implicit și caracteristicile de bază.
import Reacționează, { useRef, useState } din 'reacţiona';const DatePicker = () => {
const [data, setDate] = useState('');
const dateInputRef = useRef(nul);
const handleChange = (e) => {
Seteaza data(e.ţintă.valoare);
};
întoarcere (
<div>
<intrare
tip="Data"
onChange={handleChange}
ref={dateInputRef}
/>
<p>Data selectată: {data}</p>
</div>
);
};
exportMod implicit DatePicker;
Codul de mai sus folosește tipul nativ de introducere a datei HTML5 pentru a crea un selector de date. Utilizează cârligul useState pentru a ține evidența datei selectate și cârligul useRef pentru a obține o referință la câmpul de introducere a datei. Apoi creează un handler onChange care actualizează starea datei când utilizatorul selectează o dată.
Dezavantajele utilizării caracteristicilor încorporate
Principalul dezavantaj al utilizării tipului nativ de introducere a datei HTML5 este că nu oferă caracteristici suplimentare sau personalizare. Se limitează la un set mic de funcții implicite și nu oferă opțiuni suplimentare, cum ar fi selectarea unui interval de date.
Deși puteți adăuga stil în câmpul de introducere, nu este posibil să adăugați caracteristici suplimentare.
Folosind biblioteca react-datepicker
Biblioteca react-datepicker este o bibliotecă populară și utilizată pe scară largă pentru adăugarea unui selector de date în aplicația React.js. Oferă o gamă largă de opțiuni și caracteristici, cum ar fi posibilitatea de a selecta o serie de date, de a personaliza stilul și de a adăuga funcții suplimentare.
import Reacționează, { useState } din 'reacţiona';
import Selector de date din 'react-datepicker';const DatePickerExample = () => {
const [startDate, setStartDate] = useState(nouData());
întoarcere (
<Selector de date
selectat={startDate}
onChange={data => setStartDate (data)}
/>
);
};
exportMod implicit DatePickerExample;
Acest cod folosește biblioteca react-datepicker pentru a crea un selector de date. Utilizați cârligul useState pentru a ține evidența datei selectate și apoi transmiteți-o la componenta DatePicker. Aceasta va afișa un selector de dată cu data selectată.
Folosind biblioteca react-date-picker
Biblioteca react-date-picker este o altă bibliotecă populară pentru adăugarea unui selector de dată în aplicația dvs. React.js. Oferă caracteristici și opțiuni similare bibliotecii react-datepicker, cum ar fi capacitatea de a selecta o serie de date, de a personaliza stilul și de a adăuga caracteristici suplimentare. Este o alegere bună dacă sunteți în căutarea unui selector de date mai robust, cu funcții suplimentare.
import Reacționează, { useState } din 'reacţiona';
import Selector de date din „selector de date de reacție”;const DatePickerExample = () => {
const [startDate, setStartDate] = useState(nouData());
întoarcere (
<Selector de date
value={startDate}
onChange={data => setStartDate (data)}
/>
);
};
exportMod implicit DatePickerExample;
Acest cod folosește biblioteca react-date-picker pentru a crea un selector de dată. Este similar cu codul anterior, dar folosește biblioteca react-date-picker în loc de react-datepicker. Această bibliotecă oferă stiluri și funcții diferite în calendarul de selectare a datei. De asemenea, puteți adăuga stil personalizat folosind CSS sau un cadru CSS precum Tailwind.
Adăugarea de caracteristici suplimentare
După ce ați adăugat un selector de date în aplicația dvs. React.js, puteți adăuga funcții și opțiuni suplimentare pentru a o face mai ușor de utilizat și mai intuitiv. De exemplu, puteți adăuga posibilitatea de a selecta o serie de date, de a personaliza stilul și de a adăuga funcții suplimentare, cum ar fi selecția orei. De asemenea, puteți adăuga o validare personalizată pentru a vă asigura că utilizatorul selectează o dată validă.
import Reacționează, { useState } din 'reacţiona';
import Selector de date din „selector de date de reacție”;const DatePickerExample = () => {
const [startDate, setStartDate] = useState(nouData());
const [endDate, setEndDate] = useState(nouData());
întoarcere (
<div>
<Selector de date
value={startDate}
onChange={data => setStartDate (data)}
/>
<Selector de date
value={endDate}
onChange={data => setEndDate (data)}
/>
</div>
);
};
exportMod implicit DatePickerExample;
Acest cod folosește biblioteca react-date-picker pentru a crea un selector de dată. Utilizează cârligul useState pentru a ține evidența datei de începere și a datei de încheiere, transmițându-le componentelor DatePicker. Acest lucru va afișa doi selecționatori de date, unul pentru selectarea datei de începere și unul pentru selectarea datei de încheiere.
De asemenea, puteți adăuga o validare personalizată pentru a vă asigura că utilizatorul selectează o dată validă. Puteți face acest lucru utilizând handlerul de evenimente onChange pentru a verifica datele valide și pentru a afișa un mesaj de eroare dacă utilizatorul selectează o dată nevalidă.
Îmbunătățiți implicarea utilizatorilor cu ajutorul selectorului de date
Cu un selector de date, utilizatorii pot selecta datele mai rapid, cu o mai mare fiabilitate. Astfel, utilizatorii pot selecta mai ușor datele de care au nevoie, făcându-i mai probabil să utilizeze aplicația dvs. În plus, puteți personaliza un selector de date pentru a se potrivi cu aspectul aplicației dvs., făcând-o mai ușor de utilizat și mai intuitiv.
De asemenea, puteți adăuga validări la selectorul de date și la formulare pentru a vă asigura că utilizatorii introduc date valide. Acest lucru ajută la prevenirea utilizatorilor să introducă date nevalide care pot cauza erori în aplicația dvs.
