Päivämäärävalitsimen lisääminen React.js-sovellukseesi on loistava tapa parantaa sen käyttäjäystävällisyyttä. Päivämäärävalitsimen avulla käyttäjät voivat valita päivämäärän kalenterista suoraan lomakekenttään sen sijaan, että heidän tarvitsee kirjoittaa päivämäärää manuaalisesti. Tämä voi parantaa huomattavasti sovelluksesi käyttökokemusta, jolloin käyttäjien on helpompi valita tarvitsemansa päivämäärät.
Voit lisätä päivämäärävalitsimen React.js-sovellukseesi käyttämällä alkuperäisiä ominaisuuksia tai ulkoista kirjastoa.
Mikä on päivämäärävalitsin?
Päivämäärävalitsin on käyttöliittymäelementti, jonka avulla käyttäjä voi valita päivämäärän kalenterista.
Se näkyy yleensä tekstilaatikona, jonka vieressä on kalenterikuvake, jota napsautettuna avautuu kalenteri, josta käyttäjä voi valita päivämäärän. Käyttäjä voi sitten kirjoittaa päivämäärän tai valita sen kalenterista sovelluksen asetuksista riippuen.
Päivämäärävalitsin lisääminen React.js-sovellukseesi
On olemassa useita tapoja lisätä päivämäärävalitsin React.js-sovellukseesi. Näitä ovat alkuperäisten ominaisuuksien käyttö ja kolmannen osapuolen kirjastojen integrointi. Voit myös lisätä lisäominaisuuksia päivämäärävalitsimeen.
Sisäänrakennettujen ominaisuuksien käyttäminen
Sinä pystyt käytä React-koukkuja ja natiivi HTML5-päivämäärän syöttötyyppi lisätäksesi päivämäärävalitsimen sovellukseesi. Tämä on suoraviivainen tapa lisätä päivämäärävalitsin, koska se ei vaadi ylimääräisiä kirjastoja tai koodia. Siinä on kuitenkin joitain haittoja, kuten oletustyylin ja perusominaisuuksien rajoitukset.
tuonti React, { useRef, useState } alkaen "reagoi";konst Päivämääränvalitsin = () => {
const [päiväys, setDate] = useState('');
konst dateInputRef = useRef(tyhjä);
konst HandChange = (e) => {
aseta päivä(e.kohde.arvo);
};
palata (
<div>
<syöttö
tyyppi="Päivämäärä"
onChange={handleChange}
ref={dateInputRef}
/>
<s>Valittu päivämäärä: {date}</s>
</div>
);
};
viedäoletuksena Päivämäärävalitsin;
Yllä oleva koodi käyttää natiivia HTML5-päivämäärän syöttötyyppiä päivämäärävalitsimen luomiseen. Se käyttää useState-koukkua seuratakseen valittua päivämäärää ja useRef-koukkua saadakseen viitteen päivämäärän syöttökenttään. Sitten se luo onChange-käsittelijän, joka päivittää päivämäärän tilan, kun käyttäjä valitsee päivämäärän.
Sisäänrakennettujen ominaisuuksien käytön haitat
Suurin haitta natiivin HTML5-päivämäärän syöttötyypin käytössä on, että se ei tarjoa lisäominaisuuksia tai mukautuksia. Se on rajoitettu pieneen joukkoon oletusominaisuuksia, eikä se tarjoa lisävaihtoehtoja, kuten päivämääräalueen valintaa.
Vaikka voit lisätä tyyliä syöttökenttään, ei ole mahdollista lisätä muita ominaisuuksia.
React-datepicker -kirjaston käyttäminen
React-datepicker-kirjasto on suosittu ja laajalti käytetty kirjasto päivämäärävalitsimen lisäämiseen React.js-sovellukseesi. Se tarjoaa laajan valikoiman vaihtoehtoja ja ominaisuuksia, kuten mahdollisuuden valita päivämäärät, mukauttaa tyyliä ja lisätä lisäominaisuuksia.
tuonti Reagoi, { useState } alkaen "reagoi";
tuonti Päivämäärävalitsin alkaen 'react-datepicker';konst DatePickerExample = () => {
konst [aloituspäivä, setStartDate] = useState(UusiPäivämäärä());
palata (
<Päivämäärävalitsin
valittu={aloituspäivä}
onChange={päivämäärä => setStartDate (päivämäärä)}
/>
);
};
viedäoletuksena DatePickerExample;
Tämä koodi käyttää react-datepicker-kirjastoa päivämäärävalitsimen luomiseen. Käytä useState-koukkua seurataksesi valittua päivämäärää ja välitä se DatePicker-komponenttiin. Tämä näyttää päivämäärävalitsimen valitulla päivämäärällä.
React-date-picker -kirjaston käyttäminen
React-date-picker-kirjasto on toinen suosittu kirjasto päivämäärävalitsimen lisäämiseksi React.js-sovellukseesi. Se tarjoaa samanlaisia ominaisuuksia ja vaihtoehtoja kuin react-datepicker -kirjasto, kuten mahdollisuuden valita päivämäärät, mukauttaa tyyliä ja lisätä lisäominaisuuksia. Se on hyvä valinta, jos etsit kestävämpää päivämäärävalitsinta lisäominaisuuksilla.
tuonti Reagoi, { useState } alkaen "reagoi";
tuonti Päivämäärävalitsin alkaen 'react-date-picker';konst DatePickerExample = () => {
konst [aloituspäivä, setStartDate] = useState(UusiPäivämäärä());
palata (
<Päivämäärävalitsin
arvo={aloituspäivä}
onChange={päivämäärä => setStartDate (päivämäärä)}
/>
);
};
viedäoletuksena DatePickerExample;
Tämä koodi käyttää react-date-picker -kirjastoa päivämäärävalitsimen luomiseen. Se on samanlainen kuin edellinen koodi, mutta se käyttää react-date-picker -kirjastoa react-datepickerin sijaan. Tämä kirjasto tarjoaa erilaisia tyylejä ja ominaisuuksia päivämäärävalitsinkalenteriin. Voit myös lisätä mukautetun tyylin käyttämällä CSS- tai CSS-kehys, kuten Tailwind.
Lisäominaisuuksien lisääminen
Kun olet lisännyt päivämäärävalitsimen React.js-sovellukseesi, voit lisätä lisäominaisuuksia ja vaihtoehtoja tehdäksesi siitä käyttäjäystävällisemmän ja intuitiivisemman. Voit esimerkiksi lisätä mahdollisuuden valita päivämääräalueen, mukauttaa tyyliä ja lisätä lisäominaisuuksia, kuten ajan valinnan. Voit myös lisätä mukautetun vahvistuksen varmistaaksesi, että käyttäjä valitsee kelvollisen päivämäärän.
tuonti Reagoi, { useState } alkaen "reagoi";
tuonti Päivämäärävalitsin alkaen 'react-date-picker';konst DatePickerExample = () => {
konst [aloituspäivä, setStartDate] = useState(UusiPäivämäärä());
konst [endDate, setEndDate] = useState(UusiPäivämäärä());
palata (
<div>
<Päivämäärävalitsin
arvo={aloituspäivä}
onChange={päivämäärä => setStartDate (päivämäärä)}
/>
<Päivämäärävalitsin
value={endDate}
onChange={päivämäärä => setEndDate (päivämäärä)}
/>
</div>
);
};
viedäoletuksena DatePickerExample;
Tämä koodi käyttää react-date-picker -kirjastoa päivämäärävalitsimen luomiseen. Se käyttää useState-koukkua alku- ja lopetuspäivämäärän kirjaamiseen ja välittää ne DatePicker-komponenteille. Tämä näyttää kaksi päivämäärävalitsinta, joista toinen valitsee aloituspäivän ja toinen lopetuspäivämäärän.
Voit myös lisätä mukautetun vahvistuksen varmistaaksesi, että käyttäjä valitsee kelvollisen päivämäärän. Voit tehdä sen tarkistamalla onChange-tapahtumakäsittelijän kelvolliset päivämäärät ja näyttämällä virheilmoituksen, jos käyttäjä valitsee virheellisen päivämäärän.
Paranna käyttäjien sitoutumista päivämäärävalimien avulla
Päivämäärävalitsimen avulla käyttäjät voivat valita päivämäärät nopeammin ja luotettavammin. Näin käyttäjien on helpompi valita tarvitsemansa päivämäärät, jolloin he käyttävät sovellustasi todennäköisemmin. Lisäksi voit mukauttaa päivämäärävalitsimen sovelluksesi ilmeen ja tuntuman mukaan, mikä tekee siitä käyttäjäystävällisemmän ja intuitiivisemman.
Voit myös lisätä vahvistuksia päivämäärävalitsimiin ja lomakkeisiin varmistaaksesi, että käyttäjät syöttävät kelvolliset päivämäärät. Tämä auttaa estämään käyttäjiä syöttämästä virheellisiä päivämääriä, jotka voivat aiheuttaa virheitä sovelluksessasi.
