Bevezetés

Gyakran találkozunk különféle fórumokkal, weboldalakkal, ahol meg kell adni születési dátumunkat, vagy időpontot kell választani bármilyen okból történő időpont egyeztetéshez, és egy naptárszerű ikon jelenik meg a szemünk előtt. Ez honnan és hogyan bukkan fel? Valami specifikus és dinamikusan működő naptárnak kell lennie, amely okosan felismeri és bemutatja nekünk, hogy kiválaszthassuk vágyunk dátumait. Itt lép be a React Date Picker. Ebben az oktatóanyagban az összes ilyen módszert a semmitől a haladó szintig megtanuljuk, hogyan valósítható meg a Reactban, és hogyan lehet testreszabni. Folytassuk a vitát.

A Reagál A Dátumválasztó egy hasznos és bőséges komponens, amely a dátumok naptári párbeszédablakban történő megjelenítésére szolgál. Manapság általában sok dátumválasztó opció áll rendelkezésre. Mindegyiknek különböző műszaki vonatkozásai és alkalmazásai lehetnek. Ebben az oktatóanyagban kifejezetten a React Date Pickerrel fogunk foglalkozni. Ehhez szükségünk van egy csomagra, amely megjeleníti az időt és a dátumot. A jobb megértés érdekében olyan alkalmazást készítünk, amely segít jobban megérteni a React Date Picker funkciót. De előtte telepítsük az alábbi lépések szerint.

Telepítés

A Date Picker React alkalmazásunkhoz való telepítéséhez a Node.js-t előre telepítenünk kell a rendszerünkre. Bár nem fontos, hogy mindig legyenek csomóponti modulok, erősen ajánlott ezek letöltése, hogy az összes függőséget hatékonyan kiszolgálja. Ezért az alábbiakban található a React Date Picker telepítésének parancsa.

A csomag a következőn keresztül telepíthető npm:

25 c-től k-ig

 npm install react-datepicker --save 

Vagy keresztül Fonal:

 yarn add react-datepicker 

Szükség lehet a React és Proptypes egyenkénti telepítésére, mert e függőségek nélkül lehetetlen React Date Pickert létrehozni. Ezenkívül előfordulhat, hogy a külső csomagokból származó CSS-t kell használnunk, hogy a dátumválasztó nagyszerűen nézzen ki. Az alkalmazásunk használatának megkezdéséhez importálnunk kell a React Date választót a fő fájlunkba, és folyamatosan ellenőriznünk kell azt a React nézetben.

 import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; const Example = () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; 

React Datepicker példa

Feltételezve, hogy rendszerünk az összes telepítési követelménynek és függőségnek megfelelően van konfigurálva, megtanuljuk, hogyan hozhatunk létre React alkalmazást a semmiből. Ez a megvalósítás teljes mértékben a React datepicker alkalmazásán alapul.

A fenti vitában feltételezzük, hogy egymástól függetlenül telepítettük a React és a PropTypes alkalmazásokat, mivel ezek a függőségek nem szerepelnek magában a csomagban. Alkalmazásunk felépítési módszereinek folytatásához az alábbi lépéseket kell követnünk.

 npx create-react-app react-datepicker-app 

Lépjen be a projekt mappájába a paranccsal.

 cd react-datepicker-app 

Indítsa el a React alkalmazást.

 npm start 

A Node motor elindítása után ellenőrizhetjük az alkalmazásunkat a localhost 3000-es portján keresztül. Ezenkívül az alább megadott kódrészletet is bele kell foglalnunk az app.js fájlba, hogy a React Date Picker fontos összetevői importálva legyenek a fájlunkba.

mekkora a monitorom

 // app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

Az alkalmazásunk most valahogy így nézne ki.

A fenti kódolt mintában először a csomagjait importáltuk Dátumválasztó és Bootstrap a React sablonban. Ezután úgy határoztuk meg, hogy köti a kezelni a változást és küldje be az Összetevőt az eseménynaptárba. Ezek az események automatikusan aktiválódnak, amikor a felhasználó elküldi vagy módosítja a dátumválasztó bemeneti értékeit. Később a Dátumválasztó űrlapállapotot egy újjal inicializáltuk Dátum() objektum a konstruktor belsejében. Végül elindítottuk a dátumválasztót az alábbi direktívával, hogy néhány tulajdonságot adjunk hozzá.

A kimenetet naptárközpontú dátumválasztó formátumban tudjuk megjeleníteni. A fent megadott dátumválasztó testreszabott tulajdonságokat ad a fent bemutatott React alkalmazás-összetevőkhöz. Lehetővé teszi számunkra a dátumok kiválasztását formában hónapok, napok, és évek .

Továbbá a dátumválasztó testreszabásához számos egyéb módszerünk is van, legyen szó a komponensek színezéséről vagy a dátumok felvételére szolgáló függvények okos alkalmazásáról. Egyszerűen testreszabhatjuk is őket, ha rendelkezünk az app.js fájlhoz kapcsolódó HTML és CSS komponensekkel.

A dátumválasztó lokalizálása

Egy másik példa, amelyről tanulni fogunk, a dátumválasztó lokalizálása. A dátumválasztó, amelyet elkészítünk, nagymértékben függ a dátum-fns nemzetközivé válásától. Ennek az az oka, hogy a megjelenített elemek lokalizálására szolgál. Ha az alapértelmezett en-US kivételével területi beállítást kell használnunk, előfordulhat, hogy importálnunk kell a projektbe a date-fns fájlból.

Ezenkívül az angol az alapértelmezett területi beállítás, amely 3 módszerből áll a területi beállítás beállítására.

helyi regisztráció (karakterlánc, objektum): betölt egy importált területi objektumot a date-fns fájlból.

Állítsa be az alapértelmezett nyelv- és országkódot (karakterlánc): egy regisztrált területi beállítást állít be alapértelmezettként minden dátumválasztó példányhoz.

típusöntés és típuskonverzió java-ban

getDefaultLocale: egy karakterláncot ad vissza, amely az aktuálisan beállított alapértelmezett területi beállítást mutatja.

Ezeket a szolgáltatásokat az alábbi kódrészlet segítségével importálhatjuk a naptárnézet nyelv- és országkódjába.

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

Amikor importálja és menti ezeket a területi beállításokat az app.js fájlunkba, az alkalmazásunk így fog kinézni.

Egy másik esetben a területi beállítások megváltoztatásához elsősorban a területi kódot kell módosítanunk, vagy a date-fns nemzetközivé tételével, hogy a kód áttekintése támogatott legyen.

 setDefaultLocale('es') 

A naptár dátumtartományának beállítása a Dátumválasztóban.

Megtanuljuk, hogyan lehet megvalósítani a tartomány funkcionalitását a minDate és maxDate tulajdonság ebben a lépésben. Ehhez importáljuk a addDays AP én a dátum-fns könyvtárat a React komponens tetejére. A tartomány beállításához hozzáadja a napok számát a hozzárendelt dátumhoz.

 import addDays from 'date-fns/addDays' 

A addDays() a módszer általában két paramétert vesz igénybe:

véletlen sorrendű sql

Dátum: A dátum, amelyet frissíteni kell.

Összeg: A jelentős mennyiségű napot kellett beleszámítani.

A React naptárban egyszerűen beállíthatjuk a dátumtartományt az aktuálistól a következő hét napig. Ez akkor érthető meg, ha megvalósítjuk a minDate és maxDate módszereket az alábbi példakódban.

 render() { return ( Show Date ); } 

Alkalmazásunk teljes kódrészlete a fenti lépések végrehajtása után az alábbiakban látható.

 import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 

A fenti példarészletben elkészítettük minDate bejelentkezési komponensként, és a felhasználó csak a mai nap előtti dátumot választhatja ki. A kijelentkezési komponensnél a dátumértéket használtuk, ami azt jelenti, hogy a felhasználó nem választhat a bejelentkezés dátuma előtti dátumot.

A következő lépésben elmentjük állapotunk értékét, és meghatározzuk az egyes fogantyúk működését. A fő ötlet az, hogy úgy valósítsák meg, hogy mindegyikhez egyszerűen létrehoznak egy állapotot becsekkolás és kijelentkezés dátumot a meghatározott értékekkel, és ott menti az adatokat. Az egyetlen különbség abban rejlik minDate a check-out komponens módszere, mivel az kizárólag a check-in komponenstől függ. Így ügyelve arra, hogy ne előtte és ne utána legyen minden értékben beállítva, most könnyedén kiválaszthatjuk a dátumokat és meghatározhatjuk a kijelentkezést.

Következtetés

Ebben az oktatóanyagban egy egyszerű, lépésről-lépésre szóló útmutatót tudtunk követni egy egyéni React Datepicker komponens felépítéséhez, amely egyszerűen használható a natív elem helyettesítésére. HTML5 dátumválasztó bemeneti elemek. Megtanultuk, hogyan állítsuk be prioritásként a React alkalmazást, mivel a React összetevők renderelése bonyolultnak tűnhet a kezdők számára, így a függőségek beállítását a kezdők mindig előnyben részesítenék. Különféle példákkal is találkoztunk, hogy kristálytiszta koncepciót alakítsunk ki a Datepicker összetevőinek alkalmazásunkban való használatáról. Megismertük a dátumválasztó honosításának folyamatát is, hogy a dátumválasztási folyamat ne okozzon problémát, ha egy adott időtartamra vannak kiválasztva a naptárban.

Bár az ebben az oktatóanyagban létrehozott egyéni dátumválasztó a várt módon működik, nem felel meg a dátumválasztó elemre vonatkozó összes speciális követelménynek. További fejlesztések hajthatók végre, mint például a max és min implementálása kellékeken keresztül, a beviteli típus átváltása szövegről dátumra, és jobb hozzáférhetőség javítása. Tervezési módszereket is fejleszthetünk a dátumválasztóhoz, amelyet ebben az oktatóanyagban implementáltunk, Bootstrap-csomagok importálásával, valamint egyéni stílus és lebegtetési tulajdonságok hozzáadásával, hogy jobban nézzen ki.