Įvadas

Dažnai susiduriame su įvairiais forumais ir svetainėmis, kur turime įvesti savo gimimo datą arba pasirinkti datą susitikimui dėl bet kokios priežasties, ir prieš akis iškyla į kalendorių panaši piktograma. Kaip ir iš kur tai atsiranda? Tai turi būti koks nors konkretus ir dinamiškai maitinamas kalendorius, kuris sumaniai atpažįsta ir pateikia mums, kad pasirinktume norimas datas. Čia įsijungia „React Date Picker“. Šioje mokymo programoje mes mokysime visus tokius metodus nuo nulio iki pažengusio lygio, kaip jis įgyvendinamas „React“ ir kaip jį galima pritaikyti. Tęskime diskusiją.

The Reaguoti Datos rinkiklis yra naudingas ir gausus komponentas, naudojamas datoms rodyti naudojant kalendoriaus dialogo formatą. Šiomis dienomis paprastai yra daug datos rinkiklio parinkčių. Visi jie gali turėti skirtingus techninius aspektus ir pritaikymą. Šioje pamokoje mes konkrečiai kalbėsime su React Date Picker. Tam turime turėti paketą, kuriame būtų rodomas laikas ir data. Norėdami geriau suprasti, sukursime programą, kuri padėtų mums geriau suprasti React Date Picker. Tačiau prieš tai įdiegkime, kaip parodyta toliau pateiktuose žingsniuose.

Montavimas

Norėdami įdiegti datos parinkiklį mūsų React programai, sistemoje turime iš anksto įdiegti Node.js. Nors nėra svarbu visada turėti mazgų modulius, labai rekomenduojama juos atsisiųsti, kad visos priklausomybės būtų aptarnaujamos efektyviai. Todėl žemiau pateikta komanda įdiegti „React Date Picker“.

Paketą galima įdiegti per npm:

svyruojantis css

 npm install react-datepicker --save 

Arba per Verpalai:

 yarn add react-datepicker 

Gali kilti poreikis įdiegti „React“ ir jo „Proptypes“ atskirai, nes be šių priklausomybių neįmanoma sukurti „React Date Picker“. Be to, mums gali tekti naudoti CSS iš išorinių paketų, kad datos parinkiklis atrodytų puikiai. Norėdami pradėti naudoti programą, į pagrindinį failą turime importuoti reakcijos datos rinkiklį ir nuolat jį tikrinti naudodami „React“ rodinį.

 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)} /> ); }; 

Reaguoti datos rinkiklio pavyzdį

Darant prielaidą, kad mūsų sistema sukonfigūruota pagal visus diegimo reikalavimus ir priklausomybes, išmoksime sukurti „React“ programą nuo nulio. Šis diegimas visiškai pagrįstas React datepicker programa.

Pirmiau pateiktoje diskusijoje darome prielaidą, kad „React“ ir „PropTypes“ įdiegėme atskirai, nes šios priklausomybės nėra įtrauktos į patį paketą. Norėdami tęsti programos kūrimo metodus, turime atlikti toliau nurodytus veiksmus.

 npx create-react-app react-datepicker-app 

Perkelkite į projekto aplanką naudodami komandą.

rūšiuoti masyvų sąrašą java

 cd react-datepicker-app 

Paleiskite programą „React“.

 npm start 

Paleidę „Node“ variklį, galime patikrinti savo programą naudodami „localhost“ prievado numerį 3000. Be to, į failą app.js turime įtraukti toliau pateiktą kodo fragmentą, kad svarbūs React Date Picker komponentai būtų importuoti į mūsų failą.

 // 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; 

Mūsų programa dabar atrodytų maždaug taip.

Pirmiau pateiktame užkoduotame pavyzdyje pirmiausia importavome pakuotes Datos rinkiklis ir Bootstrap React šablone. Tada mes jį apibrėžėme, kad susietume rankenos keitimas ir pateikti Komponentą įvykių kalendoriuje. Šie įvykiai bus automatiškai suaktyvinti, kai vartotojas pateiks arba pakeis datos rinkiklio įvesties verčių reikšmes. Vėliau datos rinkiklio formos būseną inicijavome nauja Data() objektas konstruktoriaus viduje. Galiausiai, mes inicijavome datos rinkiklį naudodami toliau pateiktą direktyvą, kad pridėtume prie jo kai kurias ypatybes.

Galime vizualizuoti išvestį į kalendorių orientuoto datos rinkiklio formatu. Aukščiau pateiktas datos rinkiklis prideda tinkintas ypatybes prie anksčiau parodytų „React“ programos komponentų. Tai leidžia mums pasirinkti datas forma mėnesiai, dienos, ir metų .

Be to, norėdami tinkinti datos rinkiklį, turime įvairių kitų metodų, nesvarbu, ar tai būtų komponentų spalvinimas, ar protingas funkcijų taikymas datų rinkimui. Taip pat galime lengvai juos tinkinti, jei turime HTML ir CSS komponentų, susijusių su app.js failu.

Datos rinkiklio lokalizavimas

Kitas pavyzdys, apie kurį sužinosime, yra datos rinkiklio lokalizavimas. Datos rinkiklis, kurį ketiname sukurti, labai priklauso nuo datos-fns internacionalizavimo. Taip yra todėl, kad jis naudojamas elementams, kurie bus rodomi, lokalizuoti. Jei mums reikia naudoti lokalę, išskyrus numatytąją en-US, gali tekti ją importuoti į projektą iš date-fns.

Be to, anglų kalba yra numatytoji lokalė, kurią sudaro 3 lokalės nustatymo būdai.

užsiregistruoti vietinėje (eilutė, objektas): įkelia importuotą lokalės objektą iš date-fns.

Nustatyti numatytąją lokalę (eilutė): nustato registruotą lokalę kaip numatytąją visiems datos rinkiklio egzemplioriams.

repl java

getDefaultLocale: grąžina eilutę, rodančią šiuo metu nustatytą numatytąją lokalę.

Šias paslaugas galime importuoti į kalendoriaus rodinio lokalę naudodami toliau pateiktą kodo fragmentą.

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

Importuojant ir išsaugant šias lokalės paslaugas į failą app.js, mūsų programa atrodys taip.

Kitu atveju, norėdami pakeisti lokales, pirmiausia turime pakeisti lokalės kodą arba naudoti datos-fns internacionalizavimą, kad būtų galima palaikyti kodo peržiūrą.

 setDefaultLocale('es') 

Kalendoriaus dienų sekos nustatymas datų rinkiklyje.

Išmoksime diegti diapazono funkcionalumą naudojant minDate ir maxDate nuosavybė šiame žingsnyje. Norėdami tai padaryti, importuojame AddDays AP Aš iš data-fns biblioteką mūsų React komponento viršuje. Prie priskirtos datos bus pridėtas konkretus dienų skaičius, kad būtų nustatytas diapazonas.

 import addDays from 'date-fns/addDays' 

The addDays() metodas paprastai apima du parametrus:

Data: Data, kurią reikia atnaujinti.

Suma: Reikėjo įtraukti nemažą dienų skaičių.

React kalendoriuje galime lengvai nustatyti datų diapazoną nuo dabartinės iki artimiausių septynių dienų. Tai galima suprasti, kai įgyvendiname minDate ir maxDate metodus toliau pateiktame pavyzdiniame kode.

 render() { return ( Show Date ); } 

Visas mūsų programos kodo fragmentas, įgyvendinus visus anksčiau nurodytus veiksmus, parodytas toliau.

 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; 

Aukščiau pateiktame fragmento pavyzdyje mes padarėme minDate kaip registracijos komponentas, o vartotojas gali pasirinkti tik ankstesnę datą. Išsiregistravimo komponentui naudojome datos reikšmę, o tai reiškia, kad vartotojas negali pasirinkti datos prieš įsiregistravimo datą.

Kitame žingsnyje išsaugosime savo būsenos vertę ir nustatysime, kaip veikia kiekviena rankena. Pagrindinė idėja – ją įgyvendinti tiesiog sukuriant kiekvienam būseną įsiregistruoti ir išsiregistravimas datą su apibrėžtomis reikšmėmis ir ten išsaugant duomenis. Vienintelis skirtumas yra tame minDate išsiregistravimo komponento metodas, nes jis priklauso tik nuo registracijos komponento. Taigi, užtikrindami, kad viskas būtų nustatyta pagal vertybes ne prieš ir ne po to, dabar galime lengvai pasirinkti datas ir apibrėžti išsiregistravimo laiką.

pavadinkite miestą JAV

Išvada

Šiame vadove mes galėjome sekti paprastą nuoseklų vadovą, kaip sukurti pasirinktinį React Datepicker komponentą, kurį galima lengvai naudoti kaip vietinio komponento pakaitalą. HTML5 datos rinkiklis įvesties elementai. Sužinojome, kaip nustatyti prioritetinę programą „React“, nes pradedantiesiems „React“ komponentų atvaizdavimas gali atrodyti sudėtingas, todėl pradedantiesiems visada teiktų pirmenybę priklausomybių nustatymui. Taip pat radome įvairių pavyzdžių, kad sukurtume visiškai aiškią Datepicker komponentų naudojimo programoje koncepciją. Taip pat sužinojome apie datos rinkiklio lokalizavimo procesą, kad datos pasirinkimo procesas nesukeltų problemų, jei kalendoriuje jie parenkami konkrečiai trukmei.

Nors šioje mokymo programoje sukurtas tinkintas datos rinkiklis veikia taip, kaip tikėtasi, jis neatitinka visų išplėstinių datos rinkiklio elemento reikalavimų. Galima atlikti tolesnius patobulinimus, pvz., diegti maks. ir min. per rekvizitus, pakeisti įvesties tipą iš teksto į datą ir nustatyti geresnį prieinamumą. Taip pat galime sukurti datos rinkiklio projektavimo metodus, kuriuos įdiegėme šioje mokymo programoje, importuodami „Bootstrap“ paketus ir pridėdami pasirinktinį stilių bei užvedimo žymekliu savybes, kad jis atrodytų geriau.