Datos rinkiklio pridėjimas prie programos React.js yra puikus būdas pagerinti jos patogumą vartotojui. Datos rinkiklis leidžia vartotojams pasirinkti datą iš kalendoriaus tiesiai formos lauke, o ne įvesti datą rankiniu būdu. Tai gali labai pagerinti programos naudotojo patirtį, todėl naudotojams bus lengviau pasirinkti jiems reikalingas datas.
Galite pridėti datos rinkiklį prie savo React.js programos naudodami vietines funkcijas arba išorinę biblioteką.
Kas yra datos rinkiklis?
Datos rinkiklis yra sąsajos elementas, leidžiantis vartotojui pasirinkti datą iš kalendoriaus.
Paprastai jis rodomas kaip teksto laukelis su kalendoriaus piktograma šalia, kurią spustelėjus atidaromas kalendorius, leidžiantis vartotojui pasirinkti datą. Tada vartotojas gali įvesti datą arba pasirinkti ją iš kalendoriaus, atsižvelgdamas į programos konfigūraciją.
Kaip pridėti datos parinkiklį prie savo React.js programos
Yra keletas būdų, kaip pridėti datos parinkiklį prie programos React.js. Tai apima vietinių funkcijų naudojimą ir trečiųjų šalių bibliotekų integravimą. Taip pat prie datos rinkiklio galite pridėti papildomų funkcijų.
Integruotų funkcijų naudojimas
Tu gali naudokite React kabliukus ir savąjį HTML5 datos įvesties tipą, kad prie programos pridėtumėte datos rinkiklį. Tai paprastas būdas pridėti datos rinkiklį, nes tam nereikia papildomų bibliotekų ar kodo. Tačiau jis turi tam tikrų trūkumų, tokių kaip numatytojo stiliaus ir pagrindinių funkcijų apribojimai.
importuoti Reaguoti, { useRef, useState } iš „reaguoti“;konst Datos rinkiklis = () => {
const [data, setDate] = useState('');
konst dateInputRef = useRef(nulinis);
konst handChange = (e) => {
setDate(e.taikinys.vertė);
};
grąžinti (
<div>
<įvestis
tipas ="data"
onChange={handleChange}
ref={dateInputRef}
/>
<p>Pasirinkta data: {date}</p>
</div>
);
};
eksportuotinumatytas DatePicker;
Anksčiau pateiktame kode datos rinkikliui sukurti naudojamas vietinis HTML5 datos įvesties tipas. Jis naudoja „useState“ kabliuką, kad galėtų sekti pasirinktą datą, ir „useRef“ kabliuką, kad gautų nuorodą į datos įvesties lauką. Tada jis sukuria onChange tvarkyklę, kuri atnaujina datos būseną, kai vartotojas pasirenka datą.
Integruotų funkcijų naudojimo trūkumai
Pagrindinis vietinio HTML5 datos įvesties tipo naudojimo trūkumas yra tas, kad jis nesiūlo jokių papildomų funkcijų ar tinkinimo. Tai apsiriboja nedideliu numatytųjų funkcijų rinkiniu ir nesiūlo jokių papildomų parinkčių, pvz., datų pasirinkimo.
Nors įvesties lauke galite pridėti stilių, neįmanoma pridėti jokių papildomų funkcijų.
React-datepicker bibliotekos naudojimas
React-datepicker biblioteka yra populiari ir plačiai naudojama biblioteka, skirta pridėti datos rinkiklį prie programos React.js. Jame yra daugybė parinkčių ir funkcijų, pavyzdžiui, galimybė pasirinkti datų diapazoną, tinkinti stilių ir pridėti papildomų funkcijų.
importuoti Reaguoti, { useState } iš „reaguoti“;
importuoti Datos rinkiklis iš „reagavimo datos rinkiklis“;konst DatePickerExample = () => {
konst [pradžios data, setStartDate] = useState(naujasData());
grąžinti (
<Datos rinkiklis
select={pradžios data}
onChange={data => setStartDate (data)}
/>
);
};
eksportuotinumatytas DatePickerExample;
Šis kodas naudoja react-datepicker biblioteką, kad sukurtų datos rinkiklį. Naudokite kabliuką useState, kad galėtumėte sekti pasirinktą datą ir perduoti ją DatePicker komponentui. Taip bus parodytas datos rinkiklis su pasirinkta data.
Reagavimo datos rinkiklio bibliotekos naudojimas
Reakcijos datos rinkiklio biblioteka yra dar viena populiari biblioteka, skirta pridėti datos rinkiklį prie programos React.js. Ji siūlo panašias funkcijas ir parinktis kaip react-datepicker biblioteka, pvz., galimybę pasirinkti datų diapazoną, tinkinti stilių ir pridėti papildomų funkcijų. Tai geras pasirinkimas, jei ieškote patikimesnio datos rinkiklio su papildomomis funkcijomis.
importuoti Reaguoti, { useState } iš „reaguoti“;
importuoti Datos rinkiklis iš 'reagavimo datos rinkiklis';konst DatePickerExample = () => {
konst [pradžios data, setStartDate] = useState(naujasData());
grąžinti (
<Datos rinkiklis
value={pradžios data}
onChange={data => setStartDate (data)}
/>
);
};
eksportuotinumatytas DatePickerExample;
Šis kodas naudoja react-date-picker biblioteką, kad sukurtų datos rinkiklį. Jis panašus į ankstesnį kodą, tačiau jame naudojama react-date-picker biblioteka, o ne react-datepicker. Šioje bibliotekoje pateikiamas skirtingas datos rinkiklio kalendoriaus stilius ir funkcijos. Taip pat galite pridėti pasirinktinį stilių naudodami CSS arba CSS sistema, tokia kaip Tailwind.
Papildomų funkcijų pridėjimas
Pridėję datos rinkiklį prie savo React.js programos, galite pridėti papildomų funkcijų ir parinkčių, kad ji būtų patogesnė ir intuityvesnė. Pavyzdžiui, galite pridėti galimybę pasirinkti datų diapazoną, tinkinti stilių ir pridėti papildomų funkcijų, pvz., laiko pasirinkimą. Taip pat galite pridėti pasirinktinį patvirtinimą, kad įsitikintumėte, jog vartotojas pasirenka tinkamą datą.
importuoti Reaguoti, { useState } iš „reaguoti“;
importuoti Datos rinkiklis iš 'reagavimo datos rinkiklis';konst DatePickerExample = () => {
konst [pradžios data, setStartDate] = useState(naujasData());
konst [endDate, setEndDate] = useState(naujasData());
grąžinti (
<div>
<Datos rinkiklis
value={pradžios data}
onChange={data => setStartDate (data)}
/>
<Datos rinkiklis
value={endDate}
onChange={data => setEndDate (data)}
/>
</div>
);
};
eksportuotinumatytas DatePickerExample;
Šis kodas naudoja react-date-picker biblioteką, kad sukurtų datos rinkiklį. Jis naudoja „useState“ kabliuką, kad galėtų sekti pradžios ir pabaigos datas, perduodamas jas DatePicker komponentams. Bus pateikti du datos rinkikliai – vienas skirtas pradžios datai, o kitas – pabaigos datai.
Taip pat galite pridėti pasirinktinį patvirtinimą, kad įsitikintumėte, jog vartotojas pasirenka tinkamą datą. Tai galite padaryti naudodami onChange įvykių tvarkyklę, kad patikrintumėte, ar nėra galiojančių datų, ir, jei vartotojas pasirenka netinkamą datą, būtų rodomas klaidos pranešimas.
Pagerinkite naudotojų įtraukimą naudodami datos rinkiklius
Naudodami datos rinkiklį naudotojai gali greičiau pasirinkti datas ir patikimiau. Tai leidžia vartotojams lengviau pasirinkti jiems reikalingas datas, todėl jie labiau linkę naudoti jūsų programą. Be to, galite tinkinti datos parinkiklį, kad jis atitiktų jūsų programos išvaizdą, todėl jis bus patogesnis ir intuityvesnis.
Taip pat galite pridėti patvirtinimų prie datos rinkėjų ir formų, kad naudotojai įvestų tinkamas datas. Tai padeda neleisti vartotojams įvesti neteisingų datų, dėl kurių jūsų programoje gali atsirasti klaidų.
