Introdução

Muitas vezes nos deparamos com vários fóruns e sites onde precisamos inserir nossa data de nascimento ou selecionar uma data para uma consulta por qualquer motivo, e um ícone semelhante a um calendário aparece bem diante de nossos olhos. Como e de onde isso surge? Deve ser algum calendário específico e dinâmico que reconheça e nos apresente de forma inteligente as datas selecionadas que desejamos. É aqui que entra o React Date Picker. Neste tutorial, aprenderíamos todos esses métodos do zero ao nível avançado sobre como eles são implementados no React e como podem ser personalizados. Vamos prosseguir com a discussão.

O Reagir O Seletor de data é um componente útil e abundante usado para exibir datas usando o formato de diálogo de calendário. Geralmente há muitas opções de seletor de data disponíveis atualmente. Todos eles podem ter diferentes aspectos técnicos e aplicações. Neste tutorial, trataremos especificamente do React Date Picker. Para isso, precisamos ter um pacote que exiba hora e data. Para melhor compreensão, faremos uma aplicação que nos ajudará a entender melhor o React Date Picker. Mas, antes disso, vamos instalá-lo conforme mostrado nos passos abaixo.

Instalação

Para instalar o Date Picker para nosso aplicativo React, precisamos ter o Node.js pré-instalado em nosso sistema. Embora não seja importante ter sempre módulos de nó, é altamente recomendável baixá-los para que todas as dependências sejam atendidas de forma eficiente. Portanto, o comando para instalar o React Date Picker é fornecido abaixo.

O pacote pode ser instalado via npm:

como abrir um arquivo json

 npm install react-datepicker --save 

Ou através Fio:

 yarn add react-datepicker 

Pode surgir a necessidade de instalar o React e seus Proptypes individualmente porque, sem essas dependências, é impossível construir um React Date Picker. Além disso, podemos precisar usar CSS de pacotes externos para que o Seletor de Data tenha uma ótima aparência visual. Para começar com nosso aplicativo, precisamos importar o seletor React Date em nosso arquivo principal e continuar verificando-o por meio da visualização 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)} /> ); }; 

Exemplo do React Datepicker

Supondo que nosso sistema esteja configurado com todos os requisitos e dependências de instalação, aprenderemos como criar uma aplicação React do zero. Esta implementação é totalmente baseada na aplicação do React datepicker.

Na discussão acima, assumimos que instalamos React e PropTypes de forma independente, uma vez que essas dependências não estão incorporadas no pacote em si. Para prosseguir com os métodos de construção de nosso aplicativo, precisamos seguir as etapas fornecidas a seguir.

 npx create-react-app react-datepicker-app 

Mova-se para dentro da pasta do projeto com o comando.

 cd react-datepicker-app 

Inicie o aplicativo React.

 npm start 

Após a inicialização do motor Node, podemos verificar nossa aplicação através da porta número 3000 do host local. Além disso, precisamos incluir o trecho de código fornecido abaixo em nosso arquivo app.js para que componentes importantes do React Date Picker sejam importados para nosso arquivo.

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

Nosso aplicativo agora seria parecido com isto.

No exemplo codificado acima, primeiro importamos os pacotes de Seletor de data e Inicialização no modelo React. Então, nós o definimos para vincular o lidar com a mudança e enviar o Componente no calendário de eventos. Esses eventos serão acionados automaticamente quando um usuário enviar ou alterar os valores de entrada do Datepicker. Posteriormente, inicializamos o estado do formulário Datepicker com um novo Data() objeto dentro do construtor. Por último, iniciamos o Datepicker com a diretiva abaixo para adicionar algumas propriedades a ele.

Podemos visualizar a saída na forma de um formato de seleção de data centrado no calendário. O Datepicker fornecido acima adiciona propriedades personalizadas aos componentes do aplicativo React mostrados acima. Isso nos permite escolher as datas na forma de meses, dias, e anos .

barra de ferramentas de acesso rápido de palavras

Além disso, para personalizar o selecionador de datas, temos vários outros métodos, seja colorindo os componentes ou aplicando de forma inteligente as funções para selecionar as datas. Também podemos personalizá-los facilmente se tivermos componentes HTML e CSS relacionados ao arquivo app.js.

Localizando o Datepicker

Outra instância que aprenderemos é como localizar o Datepicker. O selecionador de data que faremos depende muito da internacionalização do date-fns. Isso porque ele serve para localizar os elementos que estarão em exibição. Se precisarmos usar uma localidade exceto o padrão en-US, poderemos precisar importá-lo para o projeto a partir do arquivo date-fns.

Além disso, o inglês é a localidade padrão, que consiste em 3 métodos para definir a localidade.

registrar-se localmente (string, objeto): carrega um objeto de localidade importado de date-fns.

Definir localidade padrão (string): define uma localidade registrada como padrão para todas as instâncias do selecionador de data.

o que é estrutura na estrutura de dados

getDefaultLocale: retorna uma string mostrando a localidade padrão atualmente definida.

Podemos importar esses serviços para o local da visualização do calendário usando o trecho de código abaixo.

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

Ao importar e salvar esses serviços de localidade em nosso arquivo app.js, nosso aplicativo ficará assim.

Em outro caso, para alterar as localidades, precisamos alterar principalmente o código de localidade ou usar a internacionalização do date-fns para que a revisão do código possa ser suportada.

 setDefaultLocale('es') 

Configurando o intervalo de datas do calendário no Datepicker.

Aprenderemos como implementar a funcionalidade range usando o minDate e propriedade maxDate nesta etapa. Para isso, importamos o addDays AP eu do data-fns biblioteca no topo do nosso componente React. Ele adicionará o número específico de dias à data atribuída para definir o intervalo.

 import addDays from 'date-fns/addDays' 

O adicionarDias() O método geralmente leva dois parâmetros:

Data: A data que precisa ser atualizada.

Quantia: A quantidade significativa de dias necessários para ser incluída.

Podemos definir facilmente o intervalo de datas do atual até os próximos sete dias no calendário React. Isso pode ser entendido quando implementamos o minData e datamáx. métodos no código de exemplo mostrado abaixo.

 render() { return ( Show Date ); } 

O trecho de código completo de nosso aplicativo após a implementação de todas as etapas fornecidas acima é mostrado abaixo.

 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; 

No trecho de exemplo acima, fizemos minData como componente de check-in, e o usuário só pode escolher a data anterior a hoje. Utilizamos o valor data para o componente check-out, o que significa que o usuário não pode escolher uma data anterior à data de check-in.

os números do alfabeto

Na próxima etapa, salvaremos o valor do nosso estado e definiremos como funciona cada identificador. A ideia principal é implementá-lo simplesmente criando um estado para cada check-in e Confira data com os valores definidos e salvando os dados lá. A única diferença está na minData método do componente check-out, pois depende exclusivamente do componente check-in. Assim, garantindo que tudo está definido em termos de valores nem antes nem depois, podemos agora facilmente selecionar as datas e definir o check-out.

Conclusão

Neste tutorial, pudemos seguir um guia passo a passo simples sobre a construção de um componente React Datepicker personalizado que pode ser facilmente usado como um substituto para o nativo Seletor de data HTML5 elementos de entrada. Aprendemos como configurar o aplicativo React com prioridade porque renderizar os componentes do React pode parecer complexo para iniciantes, portanto, configurar dependências sempre seria preferido por um iniciante. Também encontramos vários exemplos para estabelecer um conceito claro de uso dos componentes do Datepicker em nossa aplicação. Também aprendemos sobre o processo de localização do selecionador de data para que o processo de seleção de datas não cause problemas se elas forem selecionadas por uma duração específica no calendário.

Embora o selecionador de data personalizado criado neste tutorial funcione conforme o esperado, ele não atende a todos os requisitos avançados de um elemento selecionador de data. Outras melhorias podem ser feitas, como implementar o máximo e o mínimo por meio de adereços, mudar o tipo de entrada de texto para data e estabelecer uma melhor melhoria na acessibilidade. Também podemos desenvolver métodos de design para o selecionador de data que implementamos neste tutorial, importando pacotes Bootstrap e adicionando estilos personalizados e propriedades de foco para torná-lo mais bonito.