Ievads

Mēs bieži sastopamies ar dažādiem forumiem un tīmekļa vietnēm, kur mums ir jāievada dzimšanas datums vai jāizvēlas datums tikšanās laikam, un tieši mūsu acu priekšā parādās kalendāram līdzīga ikona. Kā un no kurienes tas parādās? Tam ir jābūt kādam konkrētam un dinamiski darbināmam kalendāram, kas gudri atpazīst un piedāvā mums, lai izvēlētos mūsu vēlmju datumus. Šeit tiek izmantots React Date Picker. Šajā apmācībā mēs apgūsim visas šādas metodes no nulles līdz augstākajam līmenim par to, kā tās tiek ieviestas programmā React un kā tās var pielāgot. Turpināsim diskusiju.

The Reaģēt Datuma atlasītājs ir noderīgs un bagātīgs komponents, ko izmanto datumu parādīšanai, izmantojot kalendāra dialoga formātu. Mūsdienās parasti ir pieejamas daudzas datuma atlasītāja iespējas. Visiem tiem var būt dažādi tehniskie aspekti un pielietojums. Šajā apmācībā mēs īpaši aplūkosim React Date Picker. Šim nolūkam mums ir jābūt pakotnei, kas parāda laiku un datumu. Lai labāk izprastu, mēs izveidosim lietojumprogrammu, kas mums palīdzēs labāk izprast React Date Picker. Bet pirms tam instalēsim to, kā parādīts tālāk norādītajās darbībās.

Uzstādīšana

Lai mūsu React lietojumprogrammai instalētu Date Picker, mūsu sistēmā ir jābūt iepriekš instalētam Node.js. Lai gan nav svarīgi, lai vienmēr būtu mezglu moduļi, ir ļoti ieteicams tos lejupielādēt, lai visas atkarības tiktu apkalpotas efektīvi. Tāpēc tālāk ir dota komanda React Date Picker instalēšanai.

Pakotni var instalēt, izmantojot npm:

atšķirība starp vakariņām un vakariņām

 npm install react-datepicker --save 

Vai caur Dzija:

 yarn add react-datepicker 

Var rasties nepieciešamība atsevišķi instalēt React un tā proptypes, jo bez šīm atkarībām nav iespējams izveidot React datuma atlasītāju. Turklāt mums, iespējams, būs jāizmanto CSS no ārējām pakotnēm, lai datuma atlasītājs izskatītos vizuāli lieliski. Lai sāktu darbu ar mūsu lietojumprogrammu, galvenajā failā ir jāimportē reakcijas datuma atlasītājs un tas ir jāturpina pārbaudīt, izmantojot React skatu.

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

Reaģējiet uz Datuma atlasītāja piemēru

Pieņemot, ka mūsu sistēma ir konfigurēta ar visām instalēšanas prasībām un atkarībām, mēs iemācīsimies izveidot React lietojumprogrammu no nulles. Šī ieviešana ir pilnībā balstīta uz React datepicker lietojumprogrammu.

Iepriekš minētajā diskusijā mēs pieņemam, ka esam neatkarīgi instalējuši React un PropTypes, jo šīs atkarības nav iekļautas pašā pakotnē. Lai turpinātu mūsu lietojumprogrammas izveides metodes, mums ir jāveic tālāk norādītās darbības.

 npx create-react-app react-datepicker-app 

Pārvietojieties projekta mapē ar komandu.

 cd react-datepicker-app 

Sāciet lietotni React.

 npm start 

Pēc Node dzinēja palaišanas mēs varam pārbaudīt savu lietojumprogrammu, izmantojot vietējā resursdatora porta numuru 3000. Tālāk norādītais koda fragments ir jāiekļauj arī failā app.js, lai mūsu failā tiktu importēti svarīgi React Date Picker komponenti.

 // 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ūsu lietojumprogramma tagad izskatītos apmēram šādi.

java nomaiņa

Iepriekš minētajā kodētajā paraugā mēs vispirms importējām iepakojumus Datuma atlasītājs un Bootstrap veidnē React. Pēc tam mēs to definējām, lai saistītu roktura maiņa un iesniegt Komponentu notikumu kalendārā. Šie notikumi tiks automātiski aktivizēti, kad lietotājs iesniedz vai mainīs datumu atlasītāja ievades vērtību vērtības. Vēlāk mēs inicializējām Datuma atlasītāja veidlapas stāvokli ar jaunu Datums() objekts konstruktora iekšpusē. Visbeidzot, mēs iedarbinājām datumu atlasītāju, izmantojot tālāk norādīto direktīvu, lai tam pievienotu dažus rekvizītus.

Mēs varam vizualizēt rezultātu uz kalendāru orientēta datumu atlasītāja formātā. Iepriekš norādītais datumu atlasītājs pievieno pielāgotus rekvizītus iepriekš parādītajiem React lietojumprogrammas komponentiem. Tas ļauj mums izvēlēties datumus formā mēneši, dienas, un gadiem .

Turklāt, lai pielāgotu datumu atlasītāju, mums ir dažādas citas metodes, neatkarīgi no tā, vai tā ir komponentu krāsošana vai gudra datuma atlases funkciju lietošana. Mēs varam arī tos viegli pielāgot, ja mums ir HTML un CSS komponenti, kas saistīti ar failu app.js.

Datuma atlasītāja lokalizēšana

Vēl viens gadījums, par kuru mēs uzzināsim, ir datumu atlasītāja lokalizācija. Datuma atlasītājs, ko mēs gatavojamies izveidot, ir ļoti atkarīgs no datuma-fns internacionalizācijas. Tas ir tāpēc, ka to izmanto, lai lokalizētu elementus, kas tiks parādīti. Ja mums ir jāizmanto lokalizācija, izņemot noklusējuma en-US, iespējams, tas būs jāimportē projektā no datuma-fns.

Turklāt angļu valoda ir noklusējuma lokalizācija, kas sastāv no 3 metodēm lokalizācijas iestatīšanai.

reģistrēties vietējā (virkne, objekts): ielādē importētu lokalizācijas objektu no datuma-fns.

Iestatiet noklusējuma lokalizāciju (virkne): iestata reģistrētu lokalizāciju kā noklusējumu visiem datumu atlasītāja gadījumiem.

virknes sadalīšana c++ valodā

getDefaultLocale: atgriež virkni, kas parāda pašlaik iestatīto noklusējuma lokalizāciju.

Mēs varam importēt šos pakalpojumus kalendāra skata lokalizācijā, izmantojot tālāk norādīto koda fragmentu.

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

Importējot un saglabājot šos lokalizācijas pakalpojumus mūsu failā app.js, mūsu lietojumprogramma izskatīsies šādi.

Citā gadījumā, lai mainītu lokalizācijas, mums vispirms ir jāmaina lokalizācijas kods vai jāizmanto datuma-fns internacionalizācija, lai varētu atbalstīt koda pārskatīšanu.

 setDefaultLocale('es') 

Kalendāra datumu diapazona iestatīšana datu atlasītājā.

Mēs iemācīsimies ieviest diapazona funkcionalitāti, izmantojot minDate un maxDate īpašums šajā solī. Lai to izdarītu, mēs importējam addDays AP Es no datums-fns bibliotēku mūsu React komponenta augšpusē. Lai iestatītu diapazonu, piešķirtajam datumam tiks pievienots noteikts dienu skaits.

 import addDays from 'date-fns/addDays' 

The addDays() metode parasti aizņem divus parametrus:

Datums: Datums, kas jāatjaunina.

Summa: Vajadzēja iekļaut ievērojamo dienu skaitu.

java konstantes

Mēs varam viegli iestatīt datumu diapazonu no pašreizējās līdz nākamajām septiņām dienām React kalendārā. To var saprast, kad mēs īstenojam minDate un maxDate metodes tālāk parādītajā koda piemērā.

 render() { return ( Show Date ); } 

Tālāk ir parādīts pilns mūsu lietojumprogrammas koda fragments pēc visu iepriekš minēto darbību veikšanas.

 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; 

Iepriekš minētajā fragmentā mēs esam izveidojuši minDate kā reģistrēšanās komponentu, un lietotājs var izvēlēties tikai datumu pirms šodienas. Mēs esam izmantojuši datuma vērtību izrakstīšanās komponentam, kas nozīmē, ka lietotājs nevar izvēlēties datumu pirms reģistrēšanās datuma.

Nākamajā solī mēs saglabāsim mūsu stāvokļa vērtību un definēsim katra roktura darbību. Galvenā ideja ir to īstenot, vienkārši izveidojot katram savu stāvokli reģistrēties un izrakstīšanās datumu ar definētajām vērtībām un saglabājot datus tur. Vienīgā atšķirība slēpjas tajā minDate izrakstīšanās komponenta metode, jo tā ir atkarīga tikai no reģistrēšanās komponenta. Tādējādi, nodrošinot, ka viss ir iestatīts vērtību izteiksmē ne pirms, ne pēc, mēs tagad varam viegli izvēlēties datumus un definēt izrakstīšanās laiku.

Secinājums

Šajā apmācībā mēs esam varējuši sekot vienkāršai, soli pa solim sniegtai rokasgrāmatai par pielāgota React Datepicker komponenta izveidi, ko var viegli izmantot kā vietējās sastāvdaļas aizstājēju. HTML5 datumu atlasītājs ievades elementi. Mēs esam iemācījušies, kā iestatīt React lietojumprogrammu prioritāri, jo React komponentu renderēšana iesācējiem var šķist sarežģīta, tāpēc iesācējs vienmēr dos priekšroku atkarību iestatīšanai. Mēs arī saskārāmies ar dažādiem piemēriem, lai izveidotu pilnīgi skaidru koncepciju par Datepicker komponentu izmantošanu mūsu lietojumprogrammā. Mēs arī uzzinājām par datumu atlasītāja lokalizācijas procesu, lai datumu atlases process neradītu problēmas, ja kalendārā tie ir atlasīti uz noteiktu laiku.

Lai gan šajā apmācībā izveidotais pielāgotais datumu atlasītājs darbojas, kā paredzēts, tas neatbilst visām papildu prasībām datumu atlasītāja elementam. Var veikt papildu uzlabojumus, piemēram, ieviest maksimālo un minimālo vērtību, izmantojot rekvizītus, pārslēgt ievades veidu no teksta uz datumu un labāku pieejamības uzlabošanu. Mēs varam arī izstrādāt dizaina metodes datumu atlasītājam, ko ieviesām šajā apmācībā, importējot Bootstrap pakotnes un pievienojot pielāgotu stilu un kursora virzīšanas īpašības, lai tas izskatītos labāk.