Kuidas lisada rakendusele React.js kuupäevavalija

Kuupäevavalija lisamine oma rakendusse React.js on suurepärane viis selle kasutajasõbralikkuse parandamiseks. Kuupäevavalija võimaldab kasutajatel valida kalendrist kuupäeva otse vormiväljal, selle asemel, et kuupäev käsitsi sisestada. See võib teie rakenduse kasutuskogemust oluliselt parandada, muutes kasutajatel vajalike kuupäevade valimise lihtsamaks.

Saate lisada oma rakendusele React.js kuupäevavalija, kasutades oma funktsioone või välist teeki.

Mis on kuupäevavalija?

Kuupäevavalija on liidese element, mis võimaldab kasutajal valida kalendrist kuupäeva.

Tavaliselt kuvatakse see tekstikastina, mille kõrval on kalendriikoon ja millel klõpsamisel avaneb kalender, mis võimaldab kasutajal kuupäeva valida. Kasutaja saab seejärel sisestada kuupäeva või valida selle kalendrist olenevalt rakenduse konfiguratsioonist.

Kuidas lisada oma rakendusele React.js kuupäevavalija

Kuupäevavalija lisamiseks oma React.js-i rakendusse on mitu võimalust. Nende hulka kuuluvad omafunktsioonide kasutamine ja kolmandate osapoolte teekide integreerimine. Samuti saate kuupäevavalijasse lisada lisafunktsioone.

Sisseehitatud funktsioonide kasutamine

Sa saad kasutage Reacti konkse ja HTML5 loomulikku kuupäeva sisestustüüpi, et lisada rakendusele kuupäevavalija. See on lihtne viis kuupäevavalija lisamiseks, kuna see ei nõua täiendavaid teeke ega koodi. Sellel on aga mõned puudused, näiteks vaikestiili ja põhifunktsioonide piirangud.

importida Reageerida, { useRef, useState } alates 'reageerida';

konst Kuupäevavalija = () => {
const [kuupäev, setDate] = useState('');
konst dateInputRef = useRef(null);

konst HandChange = (e) => {
setDate(e.sihtmärk.väärtus);
};

tagasi (
<div>
<sisend
tüüp="kuupäeva"
onChange={handleChange}
ref={dateInputRef}
/>
<lk>Valitud kuupäev: {date}</lk>
</div>
);
};

eksportidavaikimisi Kuupäevavalija;

Ülaltoodud kood kasutab kuupäevavalija loomiseks natiivset HTML5 kuupäeva sisestustüüpi. See kasutab konksu useState valitud kuupäeva jälgimiseks ja konksu useRef, et saada viite kuupäeva sisestusväljale. Seejärel loob see onChange töötleja, mis värskendab kuupäeva olekut, kui kasutaja kuupäeva valib.

Sisseehitatud funktsioonide kasutamise puudused

Natiivse HTML5 kuupäevasisestustüübi kasutamise peamine puudus on see, et see ei paku täiendavaid funktsioone ega kohandamist. See on piiratud väikese hulga vaikefunktsioonidega ega paku täiendavaid valikuid, nagu kuupäevavahemiku valimine.

Kuigi saate sisestusväljale stiili lisada, ei ole võimalik lisada mingeid lisafunktsioone.

React-datepicker Library kasutamine

React-datepickeri teek on populaarne ja laialdaselt kasutatav teek kuupäevavalija lisamiseks teie rakendusse React.js. See pakub laias valikus valikuid ja funktsioone, nagu võimalus valida erinevaid kuupäevi, kohandada stiili ja lisada lisafunktsioone.

importida Reageerige, { useState } alates 'reageerida';
importida Kuupäevavalija alates 'react-datepicker';

konst DatePickerExample = () => {
konst [alguskuupäev, setStartDate] = useState(uusKuupäev());

tagasi (
<Kuupäevavalija
selected={alguskuupäev}
onChange={kuupäev => setStartDate (kuupäev)}
/>
);
};

eksportidavaikimisi DatePickerExample;

See kood kasutab kuupäevavalija loomiseks react-datepicker teeki. Kasutage konksu useState, et jälgida valitud kuupäeva ja seejärel edastada see DatePickeri komponendile. See renderdab valitud kuupäevaga kuupäevavalija.

React-date-picker Library kasutamine

Reacti-kuupäevavalija teek on teine ​​populaarne teek kuupäevavalija lisamiseks oma rakendusse React.js. See pakub sarnaseid funktsioone ja valikuid reageerimise kuupäevavalija teegiga, näiteks võimalust valida kuupäevavahemikku, kohandada stiili ja lisada lisafunktsioone. See on hea valik, kui otsite tugevamat kuupäevavalijat koos lisafunktsioonidega.

importida Reageerige, { useState } alates 'reageerida';
importida Kuupäevavalija alates 'reageerimiskuupäeva valija';

konst DatePickerExample = () => {
konst [alguskuupäev, setStartDate] = useState(uusKuupäev());

tagasi (
<Kuupäevavalija
väärtus={alguskuupäev}
onChange={kuupäev => setStartDate (kuupäev)}
/>
);
};

eksportidavaikimisi DatePickerExample;

See kood kasutab kuupäevavalija loomiseks reageerimiskuupäevavalija teeki. See sarnaneb eelmise koodiga, kuid kasutab kuupäevavalija asemel reageerimiskuupäevavalija teeki. See teek pakub kuupäevavalija kalendris erinevat stiili ja funktsioone. Saate lisada ka kohandatud stiili, kasutades CSS-i või CSS-i raamistik nagu Tailwind.

Lisafunktsioonide lisamine

Kui olete oma rakendusse React.js lisanud kuupäevavalija, saate lisada lisafunktsioone ja valikuid, et muuta see kasutajasõbralikumaks ja intuitiivsemaks. Näiteks saate lisada võimaluse valida kuupäevavahemikku, kohandada stiili ja lisada lisafunktsioone, nagu kellaaja valimine. Saate lisada ka kohandatud valideerimise tagamaks, et kasutaja valib kehtiva kuupäeva.

importida Reageerige, { useState } alates 'reageerida';
importida Kuupäevavalija alates 'reageerimiskuupäeva valija';

konst DatePickerExample = () => {
konst [alguskuupäev, setStartDate] = useState(uusKuupäev());
konst [endDate, setEndDate] = useState(uusKuupäev());

tagasi (
<div>
<Kuupäevavalija
väärtus={alguskuupäev}
onChange={kuupäev => setStartDate (kuupäev)}
/>
<Kuupäevavalija
väärtus={endDate}
onChange={kuupäev => setEndDate (kuupäev)}
/>
</div>
);
};

eksportidavaikimisi DatePickerExample;

See kood kasutab kuupäevavalija loomiseks reageerimiskuupäevavalija teeki. See kasutab alguskuupäeva ja lõppkuupäeva jälgimiseks konksu useState, edastades need DatePickeri komponentidele. See renderdab kaks kuupäevavalijat, üks alguskuupäeva ja teine ​​lõppkuupäeva valimiseks.

Saate lisada ka kohandatud valideerimise tagamaks, et kasutaja valib kehtiva kuupäeva. Seda saate teha sündmuste käitleja onChange abil, et kontrollida kehtivaid kuupäevi ja kuvada veateade, kui kasutaja valib kehtetu kuupäeva.

Parandage kasutajate seotust kuupäevavalijatega

Kuupäevavalijaga saavad kasutajad kuupäevi kiiremini ja suurema usaldusväärsusega valida. See muudab kasutajate jaoks vajalike kuupäevade valimise lihtsamaks, muutes nad tõenäolisemaks teie rakenduse kasutamiseks. Lisaks saate kohandada kuupäevavalijat vastavalt oma rakenduse välimusele ja tundele, muutes selle kasutajasõbralikumaks ja intuitiivsemaks.

Samuti saate lisada oma kuupäevavalijatele ja vormidele kinnitusi, et tagada kasutajate õigete kuupäevade sisestamine. See aitab vältida kasutajate valede kuupäevade sisestamist, mis võivad teie rakenduses vigu põhjustada.