Datuma atlasītāja pievienošana savai lietotnei React.js ir lielisks veids, kā uzlabot tās lietotājdraudzīgumu. Datuma atlasītājs ļauj lietotājiem izvēlēties datumu no kalendāra tieši veidlapas laukā, nevis manuāli ievadīt datumu. Tas var ievērojami uzlabot jūsu lietotnes lietošanas pieredzi, ļaujot lietotājiem vieglāk izvēlēties vajadzīgos datumus.
Varat pievienot datuma atlasītāju savai lietotnei React.js, izmantojot vietējās funkcijas vai ārēju bibliotēku.
Kas ir datuma atlasītājs?
Datuma atlasītājs ir saskarnes elements, kas ļauj lietotājam izvēlēties datumu no kalendāra.
Tas parasti tiek parādīts kā tekstlodziņš ar kalendāra ikonu blakus tam, un, noklikšķinot uz tā, tiek atvērts kalendārs, kas ļauj lietotājam izvēlēties datumu. Pēc tam lietotājs var ievadīt datumu vai atlasīt to kalendārā atkarībā no lietojumprogrammas konfigurācijas.
Kā lietotnei React.js pievienot datuma atlasītāju
Ir vairāki veidi, kā savai lietojumprogrammai React.js pievienot datuma atlasītāju. Tie ietver vietējo funkciju izmantošanu un trešo pušu bibliotēku integrēšanu. Varat arī pievienot papildu funkcijas savam datuma atlasītājam.
Iebūvēto funkciju izmantošana
Jūs varat izmantojiet React āķus un vietējo HTML5 datuma ievades veidu, lai lietojumprogrammai pievienotu datuma atlasītāju. Tas ir vienkāršs veids, kā pievienot datumu atlasītāju, jo tam nav nepieciešamas papildu bibliotēkas vai kods. Tomēr tam ir daži trūkumi, piemēram, noklusējuma stila un pamatfunkciju ierobežojumi.
imports Reaģēt, { useRef, useState } no "reaģēt";konst Datuma atlasītājs = () => {
const [datums, setDate] = useState('');
konst dateInputRef = useRef(null);
konst handChange = (e) => {
setDate(e.target.vērtība);
};
atgriezties (
<div>
<ievade
tips="datums"
onChange={handleChange}
ref={dateInputRef}
/>
<lpp>Atlasītais datums: {date}</lpp>
</div>
);
};
eksportētnoklusējuma Datuma atlasītājs;
Iepriekš minētais kods izmanto vietējo HTML5 datuma ievades veidu, lai izveidotu datuma atlasītāju. Tas izmanto āķi useState, lai izsekotu atlasītajam datumam, un useRef āķis, lai iegūtu atsauci uz datuma ievades lauku. Pēc tam tiek izveidots onChange apdarinātājs, kas atjaunina datuma stāvokli, kad lietotājs atlasa datumu.
Iebūvēto funkciju izmantošanas trūkumi
Galvenais vietējā HTML5 datuma ievades veida izmantošanas trūkums ir tas, ka tas nepiedāvā nekādas papildu funkcijas vai pielāgošanu. Tas ir ierobežots ar nelielu noklusējuma funkciju kopu un nepiedāvā nekādas papildu opcijas, piemēram, datumu diapazona atlasi.
Lai gan ievades laukam var pievienot stilu, nav iespējams pievienot nekādas papildu funkcijas.
Izmantojot reaģēšanas datumu atlasītāja bibliotēku
React-datepicker bibliotēka ir populāra un plaši izmantota bibliotēka datuma atlasītāja pievienošanai jūsu lietotnei React.js. Tas nodrošina plašu iespēju un funkciju klāstu, piemēram, iespēju izvēlēties datumu diapazonu, pielāgot stilu un pievienot papildu funkcijas.
imports Reaģēt, { useState } no "reaģēt";
imports Datuma atlasītājs no 'reaģēt-datuma atlasītājs';konst DatePickerExample = () => {
konst [startDate, setStartDate] = useState(jaunsDatums());
atgriezties (
<Datuma atlasītājs
atlasīts={sākuma datums}
onChange={datums => setStartDate (date)}
/>
);
};
eksportētnoklusējuma DatePickerExample;
Šis kods izmanto react-datepicker bibliotēku, lai izveidotu datuma atlasītāju. Izmantojiet āķi useState, lai izsekotu atlasītajam datumam un pēc tam nodotu to DatePicker komponentam. Tādējādi tiks parādīts datuma atlasītājs ar atlasīto datumu.
Izmantojot reaģēšanas datuma atlasītāja bibliotēku
Reakcijas datuma atlasītāja bibliotēka ir vēl viena populāra bibliotēka datuma atlasītāja pievienošanai jūsu lietotnei React.js. Tā piedāvā līdzīgas funkcijas un opcijas kā react-datepicker bibliotēkai, piemēram, iespēju izvēlēties datumu diapazonu, pielāgot stilu un pievienot papildu funkcijas. Tā ir laba izvēle, ja meklējat izturīgāku datuma atlasītāju ar papildu funkcijām.
imports Reaģēt, { useState } no "reaģēt";
imports Datuma atlasītājs no 'reaģēt-datuma atlasītājs';konst DatePickerExample = () => {
konst [startDate, setStartDate] = useState(jaunsDatums());
atgriezties (
<Datuma atlasītājs
vērtība={sākuma datums}
onChange={datums => setStartDate (date)}
/>
);
};
eksportētnoklusējuma DatePickerExample;
Šis kods izmanto reaģēšanas datuma atlasītāja bibliotēku, lai izveidotu datuma atlasītāju. Tas ir līdzīgs iepriekšējam kodam, taču tajā tiek izmantota reaģēšanas datuma atlasītāja bibliotēka, nevis reaģēšanas datuma atlasītāja. Šī bibliotēka nodrošina dažādu stilu un funkcijas datumu atlasītāja kalendārā. Varat arī pievienot pielāgotu stilu, izmantojot CSS vai CSS sistēmu, piemēram, Tailwind.
Papildu funkciju pievienošana
Kad savai lietotnei React.js esat pievienojis datuma atlasītāju, varat pievienot papildu funkcijas un opcijas, lai padarītu to lietotājam draudzīgāku un intuitīvāku. Piemēram, varat pievienot iespēju atlasīt datumu diapazonu, pielāgot stilu un pievienot papildu funkcijas, piemēram, laika izvēli. Varat arī pievienot pielāgotu validāciju, lai nodrošinātu, ka lietotājs izvēlas derīgu datumu.
imports Reaģēt, { useState } no "reaģēt";
imports Datuma atlasītājs no 'reaģēt-datuma atlasītājs';konst DatePickerExample = () => {
konst [startDate, setStartDate] = useState(jaunsDatums());
konst [endDate, setEndDate] = useState(jaunsDatums());
atgriezties (
<div>
<Datuma atlasītājs
vērtība={sākuma datums}
onChange={datums => setStartDate (date)}
/>
<Datuma atlasītājs
value={endDate}
onChange={datums => setEndDate (datums)}
/>
</div>
);
};
eksportētnoklusējuma DatePickerExample;
Šis kods izmanto reaģēšanas datuma atlasītāja bibliotēku, lai izveidotu datuma atlasītāju. Tas izmanto āķi useState, lai sekotu sākuma datumam un beigu datumam, nododot tos DatePicker komponentiem. Tādējādi tiks atveidoti divi datuma atlasītāji, viens sākuma datuma atlasei un otrs beigu datuma atlasei.
Varat arī pievienot pielāgotu validāciju, lai nodrošinātu, ka lietotājs izvēlas derīgu datumu. To var izdarīt, izmantojot notikumu apdarinātāju onChange, lai pārbaudītu derīgus datumus un parādītu kļūdas ziņojumu, ja lietotājs atlasa nederīgu datumu.
Uzlabojiet lietotāju iesaisti, izmantojot datumu atlasītājus
Izmantojot datumu atlasītāju, lietotāji var ātrāk atlasīt datumus ar lielāku uzticamību. Tādējādi lietotājiem ir vieglāk izvēlēties vajadzīgos datumus, tādējādi palielinot iespēju, ka viņi izmantos jūsu lietojumprogrammu. Turklāt varat pielāgot datuma atlasītāju, lai tas atbilstu jūsu lietojumprogrammas izskatam un darbībai, padarot to lietotājam draudzīgāku un intuitīvāku.
Varat arī pievienot validācijas datumu atlasītājiem un veidlapām, lai nodrošinātu, ka lietotāji ievada derīgus datumus. Tas palīdz neļaut lietotājiem ievadīt nederīgus datumus, kas var izraisīt kļūdas jūsu lietojumprogrammā.
