Johdanto

Usein törmäämme erilaisiin foorumeihin ja verkkosivustoihin, joissa meidän on syötettävä syntymäaikamme tai valittava tapaamispäivä mistä tahansa syystä, ja kalenterimainen kuvake ilmestyy suoraan silmiemme eteen. Miten ja mistä se ilmestyy? Sen on oltava jokin erityinen ja dynaamisesti toimiva kalenteri, joka tunnistaa älykkäästi ja esittää meille haluamamme päivämäärät. Tässä React Date Picker hyppää mukaan. Tässä opetusohjelmassa opimme kaikki tällaiset menetelmät alusta alkaen edistyneelle tasolle, kuinka se toteutetaan Reactissa ja miten sitä voidaan mukauttaa. Jatketaan keskustelua.

The Reagoi Päivämäärävalitsin on hyödyllinen ja runsas komponentti, jota käytetään päivämäärien näyttämiseen kalenterivalintaikkunan muodossa. Päivämäärävalitsin on yleensä saatavilla nykyään paljon. Niillä kaikilla voi olla erilaisia ​​teknisiä näkökohtia ja sovelluksia. Tässä opetusohjelmassa käsittelemme erityisesti React Date Picker -ohjelmaa. Sitä varten meillä on oltava paketti, joka näyttää kellonajan ja päivämäärän. Ymmärryksen parantamiseksi teemme sovelluksen, joka auttaisi meitä ymmärtämään React Date Picker -ohjelmaa paremmin. Mutta ennen sitä asennetaan se alla olevien vaiheiden mukaisesti.

Asennus

Date Pickerin asentaminen React-sovellukseemme edellyttää, että Node.js on esiasennettu järjestelmäämme. Vaikka ei ole tärkeää, että solmumoduuleita on aina, on erittäin suositeltavaa ladata ne, jotta kaikki riippuvuudet palvellaan tehokkaasti. Siksi alla annetaan komento React Date Picker -sovelluksen asentamiseksi.

Paketti voidaan asentaa kautta npm:

sharwanand

 npm install react-datepicker --save 

Tai kautta Lanka:

 yarn add react-datepicker 

Saattaa syntyä tarve asentaa React ja sen Proptypes yksitellen, koska ilman näitä riippuvuuksia on mahdotonta rakentaa React Date Picker -ohjelmaa. Saatamme myös joutua käyttämään CSS:ää ulkoisista paketeista, jotta päivämäärävalitsin näyttää visuaalisesti hyvältä. Aloittaaksemme sovelluksemme käytön, meidän on tuotava React Date -valitsin päätiedostoomme ja meidän on tarkistettava se React-näkymän kautta.

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

Reagoi Datepicker-esimerkkiin

Olettaen, että järjestelmämme on määritetty täyttämään kaikki asennusvaatimukset ja riippuvuudet, opimme luomaan React-sovelluksen tyhjästä. Tämä toteutus perustuu täysin React datepicker -sovellukseen.

Yllä olevassa keskustelussa oletamme, että olemme asentaneet Reactin ja PropTypesin itsenäisesti, koska näitä riippuvuuksia ei ole sisällytetty itse pakettiin. Jotta voimme jatkaa sovelluksemme rakentamismenetelmiä, meidän on noudatettava alla annettuja vaiheita.

 npx create-react-app react-datepicker-app 

Siirry projektikansion sisään komennolla.

merkkijono int-muunnin

 cd react-datepicker-app 

Käynnistä React-sovellus.

 npm start 

Kun Node-moottori on käynnistetty, voimme tarkistaa sovelluksemme paikallispalvelimen portin numero 3000 kautta. Meidän on myös sisällytettävä alla annettu koodinpätkä app.js-tiedostoomme, jotta React Date Pickerin tärkeät osat tuodaan tiedostoomme.

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

Sovelluksemme näyttäisi nyt suunnilleen tältä.

Yllä olevassa koodatussa näytteessä toimme ensin paketit Päivämäärävalitsin ja Bootstrap React-mallissa. Sitten määritimme sen sitomaan käsitellä vaihtoa ja lähetä komponentti tapahtumakalenteriin. Nämä tapahtumat käynnistyvät automaattisesti, kun käyttäjä lähettää tai muuttaa päivämäärävalitsimen syöttöarvoja. Myöhemmin alustimme Datepicker-lomakkeen tilan uudella Päivämäärä() esine rakentajan sisällä. Lopuksi käynnistimme Datepickerin alla olevalla käskyllä ​​lisätäksemme siihen joitain ominaisuuksia.

Voimme visualisoida tulosteen kalenterikeskeisen päivämäärävalitsin muodossa. Yllä annettu Datepicker lisää mukautettuja ominaisuuksia yllä esitettyihin React-sovelluskomponentteihin. Sen avulla voimme valita päivämäärät muodossa kuukausia, päiviä, ja vuotta .

Lisäksi meillä on useita muita menetelmiä päivämäärävalitsimen mukauttamiseen, olipa kyseessä sitten komponenttien väritys tai toimintojen älykäs soveltaminen päivämäärän poimimiseen. Voimme myös muokata niitä helposti, jos meillä on app.js-tiedostoon liittyviä HTML- ja CSS-komponentteja.

Päivämäärävalitsimen lokalisointi

Toinen tapaus, josta aiomme oppia, on lokalisoida päivämäärävalitsin. Päivämäärävalitsin, jonka aiomme tehdä, riippuu suuresti päivämäärä-fns-kansainvälistymisestä. Tämä johtuu siitä, että sitä käytetään näytössä olevien elementtien lokalisointiin. Jos meidän on käytettävä maa-asetusta paitsi oletusasetusta en-US, meidän on ehkä tuotava se projektiin date-fns-tiedostosta.

Lisäksi englanti on oletuskieli, joka koostuu kolmesta tapaa asettaa kieli.

rekisteröidy paikallisesti (merkkijono, objekti): lataa tuodun kieli-objektin date-fns:stä.

Aseta oletuskieli (merkkijono): asettaa rekisteröidyn kieli-asetuksen oletusasetukseksi kaikille päivämäärävalitsin-esiintymille.

tyypin valu ja tyyppimuunnos javassa

getDefaultLocale: palauttaa merkkijonon, joka näyttää nykyisen oletusarvon.

Voimme tuoda nämä palvelut kalenterinäkymän alueeseen alla olevan koodinpätkän avulla.

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

Kun tuot ja tallennat nämä maa-asetukset app.js-tiedostoomme, sovelluksemme näyttää tältä.

Toisessa tapauksessa, jotta voimme muuttaa kieliasetuksia, meidän on ensisijaisesti muutettava aluekoodia tai käyttämällä päivämäärä-fns:n kansainvälistämistä, jotta koodin tarkistusta voidaan tukea.

 setDefaultLocale('es') 

Kalenterin ajanjakson asettaminen Päivämääränvalitsimessa.

Opimme kuinka toteuttaa valikoiman toiminnallisuutta käyttämällä minDate ja maxDate-ominaisuus tässä vaiheessa. Tätä varten tuomme addDays AP minä kotoisin päivämäärä-fns kirjasto React-komponenttimme alkuun. Se lisää tietyn määrän päiviä määritettyyn päivämäärään alueen määrittämiseksi.

 import addDays from 'date-fns/addDays' 

The addDays() menetelmä vaatii yleensä kaksi parametria:

Päivämäärä: Päivämäärä, joka on päivitettävä.

Määrä: Huomattava määrä päiviä piti ottaa mukaan.

Voimme helposti asettaa päivämääräalueen nykyisestä seitsemään päivään React-kalenterissa. Tämä voidaan ymmärtää, kun toteutamme minDate ja maxDate menetelmiä alla näytetyssä esimerkkikoodissa.

 render() { return ( Show Date ); } 

Alla näkyy sovelluksemme täydellinen koodinpätkä kaikkien yllä olevien vaiheiden toteuttamisen jälkeen.

merkkijono java-taulukko

 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; 

Yllä olevassa esimerkkikatkelmassa olemme tehneet minDate lähtöselvityskomponenttina, ja käyttäjä voi valita vain päivämäärän ennen tätä päivää. Olemme käyttäneet uloskirjautumiskomponentille päivämääräarvoa, mikä tarkoittaa, että käyttäjä ei voi valita päivämäärää ennen sisäänkirjautumispäivää.

Seuraavassa vaiheessa tallennamme tilamme arvon ja määrittelemme, miten kukin kahva toimii. Pääideana on toteuttaa se luomalla jokaiselle oma tila ilmoittautua ja Tarkista päivämäärä määritetyillä arvoilla ja tallentamalla tiedot sinne. Ainoa ero on siinä minDate lähtöselvityskomponentin menetelmä, koska se riippuu yksinomaan lähtöselvityskomponentista. Näin ollen varmistaen, että kaikki on asetettu arvoihin, ei ennen eikä jälkeen, voimme nyt helposti valita päivämäärät ja määrittää uloskirjautumisen.

Johtopäätös

Tässä opetusohjelmassa olemme voineet seurata yksinkertaisen vaiheittaisen oppaan avulla mukautetun React Datepicker -komponentin rakentamista, jota voidaan helposti käyttää alkuperäisen komponentin korvikkeena. HTML5 päivämäärävalitsin syöttöelementit. Olemme oppineet asettamaan React-sovelluksen tärkeysjärjestykseen, koska React-komponenttien renderöinti saattaa tuntua monimutkaiselta aloittelijoille, joten aloittelija kannattaa aina riippuvuuksien määrittämistä. Löysimme myös erilaisia ​​esimerkkejä luodaksemme kristallinkirkkaan käsityksen Datepickerin komponenttien käytöstä sovelluksessamme. Opimme myös päivämäärävalitsimen lokalisointiprosessista, jotta päivämäärän valintaprosessi ei aiheuta ongelmia, jos ne valitaan tietyksi ajaksi kalenterissa.

Vaikka tässä opetusohjelmassa luotu mukautettu päivämääränvalitsin toimii odotetusti, se ei täytä kaikkia päivämääränvalitsinelementin lisävaatimuksia. Muita parannuksia voidaan tehdä, kuten max- ja min-arvojen käyttöönotto rekvisiittausten kautta, syöttötyypin vaihtaminen tekstistä päivämäärään ja paremman saavutettavuuden parantaminen. Voimme myös kehittää suunnittelumenetelmiä päivämäärävalitsimelle, jonka toteutimme tässä opetusohjelmassa tuomalla Bootstrap-paketteja ja lisäämällä mukautettua tyyliä ja osoittimen ominaisuuksia, jotta se näyttää paremmalta.