introduzione

Spesso ci imbattiamo in vari forum e siti web in cui dobbiamo inserire la nostra data di nascita o selezionare una data per un appuntamento per qualsiasi causa e davanti ai nostri occhi appare un'icona simile a un calendario. Come e da dove viene fuori? Deve essere un calendario specifico e dinamico che riconosce e ci presenta in modo intelligente per selezionare le date del nostro desiderio. È qui che entra in gioco React Date Picker. In questo tutorial, impareremo tutti questi metodi da zero fino al livello avanzato su come è implementato in React e come può essere personalizzato. Procediamo con la discussione.

IL Reagire Selettore data è un componente utile e abbondante utilizzato per visualizzare le date utilizzando il formato della finestra di dialogo del calendario. Di solito ci sono molte opzioni di selezione data disponibili al giorno d'oggi. Tutti possono avere aspetti tecnici e applicazioni diverse. In questo tutorial, ci occuperemo specificamente di React Date Picker. Per questo, dobbiamo avere un pacchetto che visualizzi ora e data. Per una migliore comprensione, creeremo un'applicazione che ci aiuterà a comprendere meglio React Date Picker. Ma prima installiamolo come mostrato nei passaggi seguenti.

Installazione

Per installare Date Picker per la nostra applicazione React, dobbiamo avere Node.js preinstallato sul nostro sistema. Sebbene non sia importante avere sempre a disposizione i moduli del nodo, è altamente consigliabile scaricarli in modo che tutte le dipendenze siano servite in modo efficiente. Pertanto, di seguito viene fornito il comando per installare React Date Picker.

Il pacchetto può essere installato tramite npm:

ciclo di vita sdlc

 npm install react-datepicker --save 

Oppure tramite Filato:

 yarn add react-datepicker 

Potrebbe sorgere la necessità di installare React e i suoi Proptype individualmente perché, senza queste dipendenze, è impossibile creare un React Date Picker. Inoltre, potrebbe essere necessario utilizzare i CSS dei pacchetti esterni in modo che il selettore della data abbia un bell'aspetto visivamente. Per iniziare con la nostra applicazione, dobbiamo importare il selettore React Date nel nostro file principale e dobbiamo continuare a controllarlo tramite 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)} /> ); }; 

Esempio di React Datepicker

Supponendo che il nostro sistema sia configurato con tutti i requisiti di installazione e le dipendenze, impareremo come creare un'applicazione React da zero. Questa implementazione è completamente basata sull'applicazione di React datepicker.

Nella discussione sopra, presupponiamo di aver installato React e PropTypes in modo indipendente poiché queste dipendenze non sono incorporate nel pacchetto stesso. Per procedere con i metodi di creazione della nostra applicazione, dobbiamo seguire i passaggi indicati di seguito.

 npx create-react-app react-datepicker-app 

Spostarsi all'interno della cartella del progetto con il comando.

 cd react-datepicker-app 

Avvia l'app React.

 npm start 

Dopo aver avviato il motore del nodo, possiamo controllare la nostra applicazione tramite la porta numero 3000 del localhost. Inoltre, dobbiamo includere lo snippet di codice indicato di seguito nel nostro file app.js in modo che i componenti importanti per React Date Picker vengano importati nel nostro file.

 // 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 applicazione ora sarebbe simile a questa.

Nell'esempio codificato sopra, abbiamo prima importato i pacchetti di Date picker E Bootstrap nel modello React. Quindi, lo abbiamo definito per associare il file gestire il cambiamento e inviare il componente nel calendario degli eventi. Questi eventi verranno attivati ​​automaticamente quando un utente invia o modifica i valori del valore di input di Datepicker. Successivamente, abbiamo inizializzato lo stato del modulo Datepicker con un nuovo Data() oggetto all'interno del costruttore. Infine, abbiamo avviato Datepicker con la direttiva seguente per aggiungervi alcune proprietà.

per l'array di stringhe Java

Possiamo visualizzare l'output sotto forma di un formato datepicker incentrato sul calendario. Il Datepicker sopra indicato aggiunge proprietà personalizzate ai componenti dell'applicazione React mostrati sopra. Ci consente di scegliere le date sotto forma di mesi, giorni, E anni .

Inoltre, per personalizzare il datepicker, abbiamo vari altri metodi, sia colorando i componenti sia applicando in modo intelligente le funzioni per raccogliere le date. Possiamo anche personalizzarli facilmente se disponiamo di componenti HTML e CSS relativi al file app.js.

Localizzazione del Datepicker

Un'altra istanza di cui parleremo è la localizzazione di Datepicker. Il selettore di date che realizzeremo dipende in gran parte dall'internazionalizzazione di date-fns. Questo perché viene utilizzato per localizzare gli elementi che saranno esposti. Se dobbiamo utilizzare una locale diversa da quella predefinita en-US, potremmo doverla importare nel progetto da date-fns.

Inoltre, l'inglese è la locale predefinita che consiste in 3 metodi per impostare la locale.

registrarsi locale (stringa, oggetto): carica un oggetto locale importato da date-fns.

Imposta la lingua predefinita (stringa): imposta una locale registrata come predefinita per tutte le istanze di datepicker.

ordinamento dell'elenco di array Java

getDefaultLocale: restituisce una stringa che mostra la locale predefinita attualmente impostata.

Possiamo importare questi servizi nelle impostazioni internazionali della visualizzazione del calendario utilizzando lo snippet di codice seguente.

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

Importando e salvando questi servizi locali nel nostro file app.js, la nostra applicazione apparirà così.

In un altro caso, per modificare le impostazioni locali, dobbiamo modificare principalmente il codice locale o utilizzare l'internazionalizzazione di date-fns in modo che la revisione del codice possa essere supportata.

 setDefaultLocale('es') 

Impostazione dell'intervallo di date del calendario in Datepicker.

Impareremo come implementare la funzionalità dell'intervallo utilizzando il minDate E proprietà maxDate in questo passaggio. Per fare ciò, importiamo il file addDays AP Io da data-fns libreria nella parte superiore del nostro componente React. Aggiungerà il numero specifico di giorni alla data assegnata per impostare l'intervallo.

 import addDays from 'date-fns/addDays' 

IL aggiungiGiorni() il metodo richiede solitamente due parametri:

Data: La data che deve essere aggiornata.

Quantità: La quantità significativa di giorni necessari da includere.

Possiamo facilmente impostare l'intervallo di date dai sette giorni attuali ai successivi nel calendario React. Questo può essere compreso quando implementiamo il file minDate E maxDate metodi nel codice di esempio mostrato di seguito.

 render() { return ( Show Date ); } 

Di seguito è mostrato lo snippet di codice completo per la nostra applicazione dopo aver implementato tutti i passaggi sopra indicati.

mappa java iteratore

 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; 

Nello snippet di esempio sopra, abbiamo creato minDate come componente del check-in e l'utente può scegliere solo la data precedente a oggi. Abbiamo utilizzato il valore della data per il componente di check-out, il che significa che l'utente non può scegliere una data prima della data di check-in.

Nel passaggio successivo, salveremo il valore del nostro stato e definiremo il funzionamento di ciascun handle. L'idea principale è implementarlo semplicemente creando uno stato per ciascuno registrare E guardare data con i valori definiti e salvando lì i dati. L'unica differenza sta nel minDate metodo della componente di check-out, in quanto dipende esclusivamente dalla componente di check-in. Quindi, assicurandoci che tutto sia impostato in termini di valori né prima né dopo, ora possiamo selezionare facilmente le date e definire il check-out.

Conclusione

In questo tutorial, siamo stati in grado di seguire una semplice guida passo passo sulla creazione di un componente React Datepicker personalizzato che può essere facilmente utilizzato in sostituzione del componente nativo Selettore data HTML5 elementi di input. Abbiamo imparato come impostare l'applicazione React in base alla priorità perché il rendering dei componenti React potrebbe sembrare complesso per i principianti, quindi l'impostazione delle dipendenze sarebbe sempre preferita da un principiante. Ci siamo anche imbattuti in vari esempi per stabilire un concetto cristallino dell'utilizzo dei componenti di Datepicker nella nostra applicazione. Abbiamo anche appreso il processo di localizzazione del datepicker in modo che il processo di selezione delle date non causi problemi se vengono selezionate per una durata specifica sul calendario.

Sebbene il datepicker personalizzato creato in questo tutorial funzioni come previsto, non è conforme a tutti i requisiti avanzati per un elemento datepicker. È possibile apportare ulteriori miglioramenti, come l'implementazione del massimo e del minimo tramite oggetti di scena, il passaggio dal tipo di input da testo a quello aggiornato e il miglioramento dell'accessibilità. Possiamo anche sviluppare metodi di progettazione per il datepicker che abbiamo implementato in questo tutorial importando pacchetti Bootstrap e aggiungendo stili personalizzati e proprietà di hovering per renderlo più bello.