Introducció

Sovint ens trobem amb diversos fòrums i llocs web on hem d'introduir la nostra data de naixement o seleccionar una data per a una cita per qualsevol causa, i una icona semblant a un calendari apareix just davant dels nostres ulls. Com i d'on surt això? Ha de ser un calendari específic i dinàmic que ens reconegui i ens presenti intel·ligentment per seleccionar les dates del nostre desig. Aquí és on entra React Date Picker. En aquest tutorial, aprendrem tots aquests mètodes des de zero fins al nivell avançat sobre com s'implementa a React i com es pot personalitzar. Continuem amb la discussió.

El Reacciona Selector de dates és un component útil i abundant que s'utilitza per mostrar les dates mitjançant el format de diàleg del calendari. Normalment hi ha moltes opcions de selecció de dates disponibles en aquests dies. Tots ells poden tenir diferents aspectes tècnics i aplicacions. En aquest tutorial, tractarem específicament amb React Date Picker. Per això, hem de tenir un paquet que mostri l'hora i la data. Per a una millor comprensió, farem una aplicació que ens ajudaria a entendre millor React Date Picker. Però, abans d'això, instal·lem-lo tal com es mostra als passos següents.

Instal·lació

Per instal·lar Date Picker per a la nostra aplicació React, hem de tenir Node.js preinstal·lat al nostre sistema. Tot i que no és important tenir sempre mòduls de nodes, és molt recomanable descarregar-los perquè totes les dependències estiguin servides de manera eficient. Per tant, a continuació es mostra l'ordre per instal·lar React Date Picker.

El paquet es pot instal·lar mitjançant npm:

diferència entre el sopar i el sopar

 npm install react-datepicker --save 

O via Fil:

 yarn add react-datepicker 

Podria sorgir la necessitat d'instal·lar React i els seus Proptypes individualment perquè, sense aquestes dependències, és impossible construir un React Date Picker. A més, és possible que hàgim d'utilitzar CSS dels paquets externs perquè el Selector de dates tingui un aspecte visual fantàstic. Per començar amb la nostra aplicació, hem d'importar el selector de data de React al nostre fitxer principal i hem de seguir comprovant-lo a través de la vista React.

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

Exemple de React Datepicker

Suposant que el nostre sistema està configurat amb tots els requisits i dependències d'instal·lació, aprendrem a crear una aplicació React des de zero. Aquesta implementació es basa completament en l'aplicació de React datepicker.

A la discussió anterior, suposem que hem instal·lat React i PropTypes de manera independent, ja que aquestes dependències no s'incorporen al propi paquet. Per continuar amb els mètodes de creació de la nostra aplicació, hem de seguir els passos que s'indiquen a continuació.

 npx create-react-app react-datepicker-app 

Mou-te dins de la carpeta del projecte amb l'ordre.

com revelar aplicacions ocultes

 cd react-datepicker-app 

Inicieu l'aplicació React.

 npm start 

Després d'iniciar el motor Node, podem comprovar la nostra aplicació a través del número de port 3000 del localhost. A més, hem d'incloure el fragment de codi que es mostra a continuació al nostre fitxer app.js perquè els components importants de React Date Picker s'importin al nostre fitxer.

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

La nostra aplicació ara semblaria així.

A la mostra codificada anteriorment, primer hem importat els paquets de Selector de dates i Bootstrap a la plantilla React. Aleshores, el vam definir per lligar el gestionar el canvi i enviar el Component al calendari d'esdeveniments. Aquests esdeveniments s'activaran automàticament quan un usuari enviï o canviï els valors d'entrada del Datapicker. Més tard, vam inicialitzar l'estat del formulari Datepicker amb un nou Data() objecte dins del constructor. Finalment, vam iniciar el Datepicker amb la directiva següent per afegir-hi algunes propietats.

Podem visualitzar la sortida en forma d'un format de selector de dates centrat en el calendari. El Datepicker indicat anteriorment afegeix propietats personalitzades als components de l'aplicació React que es mostren a dalt. Ens permet escollir les dates en forma de mesos, dies, i anys .

A més, per personalitzar el selector de dates, disposem de diversos altres mètodes, ja sigui pintant els components o aplicant de manera intel·ligent les funcions per recollir les dates. També els podem personalitzar fàcilment si tenim components HTML i CSS relacionats amb el fitxer app.js.

Localització del selector de dates

Una altra instància sobre la qual aprendrem és localitzar el Datepicker. El selector de dates que farem depèn molt de la internacionalització de date-fns. Això és perquè s'utilitza per localitzar els elements que es mostraran. Si necessitem utilitzar una configuració regional excepte la predeterminada en-US, és possible que hàgim d'importar-la al projecte des de la data-fns.

A més, l'anglès és la configuració regional predeterminada que consta de 3 mètodes per configurar la configuració regional.

registre local (cadena, objecte): carrega un objecte local importat des de date-fns.

Estableix la configuració regional predeterminada (cadena): estableix una configuració regional registrada com a predeterminada per a totes les instàncies de selector de dates.

Què és l'estructura en l'estructura de dades

getDefaultLocale: retorna una cadena que mostra la configuració regional predeterminada actualment.

Podem importar aquests serveis a la configuració regional de la visualització del calendari mitjançant el fragment de codi següent.

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

En importar i desar aquests serveis locals al nostre fitxer app.js, la nostra aplicació es veurà així.

En un altre cas, per canviar les configuracions regionals, hem de canviar principalment el codi local o utilitzant la internacionalització de date-fns perquè la revisió del codi sigui compatible.

 setDefaultLocale('es') 

Configuració de l'interval de dates del calendari a Datepicker.

Aprendrem com implementar la funcionalitat de rang utilitzant el minDate i propietat maxDate en aquest pas. Per fer-ho, importem el addDays AP Jo de la data-fns biblioteca a la part superior del nostre component React. Afegirà el nombre específic de dies a la data assignada per establir l'interval.

 import addDays from 'date-fns/addDays' 

El afegir dies() El mètode sol prendre dos paràmetres:

Data: La data que cal actualitzar.

Import: Calia incloure la quantitat significativa de dies.

Podem establir fàcilment l'interval de dates des de l'actual fins als propers set dies al calendari React. Això es pot entendre quan implementem el minData i data màxima mètodes al codi d'exemple que es mostra a continuació.

 render() { return ( Show Date ); } 

A continuació es mostra el fragment de codi complet de la nostra aplicació després d'implementar tots els passos indicats anteriorment.

algorisme del 'banquer'

 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; 

Al fragment d'exemple anterior, hem fet minData com a component d'entrada i l'usuari només pot escollir la data abans d'avui. Hem utilitzat el valor de la data per al Component de sortida, el que significa que l'usuari no pot triar una data abans de la data d'entrada.

En el següent pas, desarem el valor del nostre estat i definirem com funciona cada maneig. La idea principal és implementar-lo simplement creant un estat per a cadascun registrar i sortida data amb els valors definits i desar-hi les dades. L'única diferència rau en el minData mètode del component de sortida, ja que depèn únicament del component de facturació. Així, assegurant-nos que tot està configurat en termes de valors ni abans ni després, ara podem seleccionar fàcilment les dates i definir la sortida.

Conclusió

En aquest tutorial, hem pogut seguir una guia senzilla pas a pas sobre la creació d'un component React Datepicker personalitzat que es pot utilitzar fàcilment com a reemplaçament del nadiu. Selector de dates HTML5 elements d'entrada. Hem après a configurar l'aplicació React amb prioritat perquè la representació dels components de React pot semblar complex per als principiants, de manera que la configuració de dependències sempre seria preferida per un principiant. També ens hem trobat amb diversos exemples per establir un concepte clar com l'ús dels components de Datepicker a la nostra aplicació. També vam conèixer el procés de localització del selector de dates perquè el procés de selecció de dates no causin cap problema si es seleccionen durant una durada específica al calendari.

Tot i que el selector de dates personalitzat creat en aquest tutorial funciona com s'esperava, no compleix tots els requisits avançats per a un element de selecció de dates. Es poden fer més millores, com ara implementar el màxim i el mínim mitjançant accessoris, canviar el tipus d'entrada del text a la data i establir una millora de l'accessibilitat. També podem desenvolupar mètodes de disseny per al selector de dates que hem implementat en aquest tutorial mitjançant la importació de paquets Bootstrap i l'addició d'un estil personalitzat i propietats de passar el cursor per fer-lo veure més bé.