Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Dátumválasztó hozzáadása a React.js alkalmazáshoz nagyszerű módja annak, hogy javítsa annak felhasználóbarát jellegét. A dátumválasztó lehetővé teszi a felhasználók számára, hogy közvetlenül egy űrlapmezőben válasszanak ki egy dátumot a naptárból, ahelyett, hogy manuálisan kellene beírniuk a dátumot. Ez nagymértékben javíthatja az alkalmazás felhasználói élményét, és megkönnyíti a felhasználók számára a kívánt dátumok kiválasztását.

Dátumválasztót adhat hozzá React.js alkalmazásához natív funkciók vagy külső könyvtár segítségével.

Mi az a dátumválasztó?

A dátumválasztó egy felületelem, amely lehetővé teszi a felhasználó számára, hogy dátumot válasszon a naptárból.

Általában szövegdobozként jelenik meg mellette egy naptár ikonnal, amelyre kattintva megnyílik egy naptár, amely lehetővé teszi a felhasználó számára, hogy válasszon dátumot. A felhasználó ezután beírhatja a dátumot, vagy kiválaszthatja a naptárból, az alkalmazás konfigurációjától függően.

instagram viewer

Dátumválasztó hozzáadása a React.js alkalmazáshoz

Számos módon adhat hozzá dátumválasztót a React.js alkalmazáshoz. Ide tartozik a natív funkciók használata és a harmadik féltől származó könyvtárak integrálása. További funkciókat is hozzáadhat a dátumválasztóhoz.

A beépített funkciók használata

tudsz használjon React horgokat és a natív HTML5 dátumbeviteli típust, amellyel dátumválasztót adhat hozzá az alkalmazáshoz. Ez egy egyszerű módja a dátumválasztó hozzáadásának, mivel nincs szükség további könyvtárra vagy kódra. Van azonban néhány hátránya, például az alapértelmezett stílus és az alapvető funkciók korlátai.

import React, { useRef, useState } tól től 'reagál';

const Dátumválasztó = () => {
const [dátum, setDate] = useState('');
const dateInputRef = useRef(nulla);

const handleChange = (e) => {
dátum beállítása(e.cél.érték);
};

Visszatérés (
<div>
<bemenet
típus="dátum"
onChange={handleChange}
ref={dateInputRef}
/>
<p>Kiválasztott dátum: {date}</p>
</div>
);
};

exportalapértelmezett Dátumválasztó;

A fenti kód a natív HTML5 dátumbeviteli típust használja a dátumválasztó létrehozásához. A useState hook segítségével követi nyomon a kiválasztott dátumot, a useRef hook segítségével pedig hivatkozást kap a dátum beviteli mezőjére. Ezután létrehoz egy onChange kezelőt, amely frissíti a dátum állapotát, amikor a felhasználó kiválaszt egy dátumot.

A beépített funkciók használatának hátrányai

A natív HTML5 dátumbeviteli típus használatának fő hátránya, hogy nem kínál semmilyen további funkciót vagy testreszabást. Az alapértelmezett funkciók egy kis készletére korlátozódik, és nem kínál további lehetőségeket, például dátumtartomány kiválasztását.

Bár stílust adhat a beviteli mezőhöz, további funkciók hozzáadása nem lehetséges.

A react-datepicker Library használata

A react-datepicker könyvtár egy népszerű és széles körben használt könyvtár dátumválasztó hozzáadásához a React.js alkalmazáshoz. Lehetőségek és funkciók széles skáláját kínálja, mint például egy dátumtartomány kiválasztását, a stílus testreszabását és további funkciók hozzáadását.

import React, { useState } tól től 'reagál';
import Dátumválasztó tól től 'react-datepicker';

const DatePickerExample = () => {
const [startDate, setStartDate] = useState(újDátum());

Visszatérés (
<Dátumválasztó
select={kezdődátum}
onChange={dátum => setStartDate (dátum)}
/>
);
};

exportalapértelmezett DatePickerExample;

Ez a kód a react-datepicker könyvtárat használja a dátumválasztó létrehozásához. A useState hook segítségével nyomon követheti a kiválasztott dátumot, majd továbbítsa azt a DatePicker összetevőnek. Ez egy dátumválasztót jelenít meg a kiválasztott dátummal.

A react-date-picker Library használata

A react-dátumválasztó könyvtár egy másik népszerű könyvtár dátumválasztó hozzáadásához a React.js alkalmazáshoz. A react-datepicker könyvtárhoz hasonló szolgáltatásokat és lehetőségeket kínál, például dátumtartomány kiválasztását, a stílus testreszabását és további funkciók hozzáadását. Jó választás, ha robusztusabb dátumválasztót keres további funkciókkal.

import React, { useState } tól től 'reagál';
import Dátumválasztó tól től 'react-date-picker';

const DatePickerExample = () => {
const [startDate, setStartDate] = useState(újDátum());

Visszatérés (
<Dátumválasztó
érték={kezdődátum}
onChange={dátum => setStartDate (dátum)}
/>
);
};

exportalapértelmezett DatePickerExample;

Ez a kód a react-date-picker könyvtárat használja a dátumválasztó létrehozásához. Hasonló az előző kódhoz, de a react-datepicker könyvtárat használja a react-datepicker helyett. Ez a könyvtár különböző stílusokat és funkciókat biztosít a dátumválasztó naptárban. Egyéni stílust is hozzáadhat a CSS vagy a egy CSS keretrendszer, mint a Tailwind.

További funkciók hozzáadása

Miután hozzáadott egy dátumválasztót a React.js alkalmazáshoz, további funkciókat és beállításokat adhat hozzá, hogy felhasználóbarátabbá és intuitívabbá tegye. Hozzáadhatja például a dátumtartomány kiválasztását, a stílus testreszabását és további funkciók hozzáadását, például az időválasztást. Egyéni érvényesítést is hozzáadhat, hogy a felhasználó érvényes dátumot válasszon.

import React, { useState } tól től 'reagál';
import Dátumválasztó tól től 'react-date-picker';

const DatePickerExample = () => {
const [startDate, setStartDate] = useState(újDátum());
const [endDate, setEndDate] = useState(újDátum());

Visszatérés (
<div>
<Dátumválasztó
érték={kezdődátum}
onChange={dátum => setStartDate (dátum)}
/>
<Dátumválasztó
value={endDate}
onChange={dátum => setEndDate (dátum)}
/>
</div>
);
};

exportalapértelmezett DatePickerExample;

Ez a kód a react-date-picker könyvtárat használja a dátumválasztó létrehozásához. A useState hook segítségével nyomon követi a kezdési és befejezési dátumot, és átadja azokat a DatePicker összetevőknek. Ez két dátumválasztót jelenít meg, az egyiket a kezdő dátum, a másik pedig a befejezés dátumának kiválasztására szolgál.

Egyéni érvényesítést is hozzáadhat, hogy a felhasználó érvényes dátumot válasszon. Ezt úgy teheti meg, hogy az onChange eseménykezelővel ellenőrzi az érvényes dátumokat, és hibaüzenetet jelenít meg, ha a felhasználó érvénytelen dátumot választ ki.

Javítsa a felhasználók elköteleződését a dátumválasztókkal

A dátumválasztóval a felhasználók gyorsabban és nagyobb megbízhatósággal választhatják ki a dátumokat. Ez megkönnyíti a felhasználók számára a szükséges dátumok kiválasztását, így nagyobb valószínűséggel használják az alkalmazást. Ezenkívül személyre szabhatja a dátumválasztót, hogy illeszkedjen az alkalmazás megjelenéséhez és hangulatához, így felhasználóbarátabb és intuitívabb.

Érvényesítéseket is hozzáadhat a dátumválasztókhoz és űrlapokhoz, hogy a felhasználók érvényes dátumokat adjanak meg. Ez segít megakadályozni, hogy a felhasználók érvénytelen dátumokat adjanak meg, amelyek hibákat okozhatnak az alkalmazásban.