Criando um seletor de data no React – SitePoint


Ao desenvolver um aplicativo REACT, você pode precisar de uma maneira de os usuários selecionarem datas – seja para um sistema de reserva, um formulário ou um calendário. Uma das maneiras mais amigáveis ​​de fazer isso é implementar um Picker de data. Este guia o levará ao processo de adicionar um selecionador de data ao seu aplicativo React usando o react-datepicker biblioteca.

Etapa 1: Configure o seu projeto React

Antes de começar, verifique se você tem um Projeto React configurado. Se você não tiver um, pode criar um rapidamente correndo npx create-react-app my-datepicker-app. (Leia sobre Criar aplicativo React para saber mais.)

Etapa 2: Instale react-datepicker

O primeiro passo é adicionar o react-datepicker pacote para o seu projeto. Abra seu terminal, navegue até o diretório do projeto e execute o seguinte comando:

npm install react-datepicker

Este comando instala react-datepicker e suas dependências em seu projeto.

Etapa 3: importar react-datepicker

Com o pacote instalado, agora você pode usá -lo no seu componente React. Abra o arquivo de componente onde deseja incluir o seletor de data e adicione a seguinte declaração de importação no topo:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

A primeira linha importa o DatePicker O componente e a segunda linha importa o estilo padrão. Isso é crucial para o seletor de data renderizar corretamente.

Etapa 4: usando DatePicker no seu componente

Agora, vamos adicionar o DatePicker Componente para o seu método de renderização ou declaração de retorno se você estiver usando um componente funcional. Você também precisará gerenciar a data selecionada no estado do seu componente.

Veja como você pode fazer isso em um componente de classe:

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class MyDatePicker extends Component {
  state = {
    
    startDate: null
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

export default MyDatePicker;

Para um componente funcional usando ganchos, o código se parece com o seguinte:

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const MyDatePicker = () => {
  const (startDate, setStartDate) = useState(null);

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
    />
  );
};

export default MyDatePicker;

Etapa 5: personalização e opções

react-datepicker Oferece uma ampla gama de adereços para personalizar a aparência e a funcionalidade do seletor de data. Algumas das opções de personalização incluem:

  • Formato de data: Permite alterar o formato da data exibida.
  • mente e Maxdate: Restrinja o intervalo de data selecionável.
  • em linha: Renderize o seletor de data em linha em vez de suspensão.
  • com portal: Renderiza o seletor de data dentro de um portal, que pode ajudar no posicionamento de problemas em layouts complexos.

Aqui está um exemplo de um personalizado DatePicker:

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  dateFormat="yyyy/MM/dd"
  minDate={new Date()}
  maxDate={new Date().setMonth(new Date().getMonth() + 1)}
  inline
/>

Questões a serem observadas para

Ao criar um seletor de data em aplicativos React, o foco em vários problemas importantes pode aumentar a usabilidade, a acessibilidade e a funcionalidade:

  1. Compatibilidade do navegador. Certifique -se de operação consistente em todos os navegadores de destino, pois as diferenças podem afetar o comportamento e a aparência do seletor da data.
  2. Design responsivo. O seletor de data deve funcionar perfeitamente em dispositivos de vários tamanhos de tela, garantindo uma boa experiência do usuário em desktops e dispositivos móveis.
  3. Acessibilidade. Implementar atributos de navegação no teclado, suporte ao leitor de tela e ARIA para tornar o seletor de data acessível a todos os usuários, incluindo aqueles com deficiência.
  4. Localização e internacionalização. Apoie diferentes idiomas e formatos de data para atender a um público global, garantindo que o seletor de data atenda às expectativas culturais e linguísticas de seus usuários.
  5. Manuseio de fuso horário. Lidar com precisão de fusos horários, especialmente para aplicativos usados ​​em diferentes regiões, para evitar confusão e erros na seleção de data.
  6. Desempenho. Esteja atento ao impacto no desempenho do seu aplicativo, otimizando conforme necessário para manter uma experiência suave e responsiva.
  7. Gerenciamento de dependência. Atualize regularmente a biblioteca de picker de data para se beneficiar de patches de segurança e novos recursos, mas teste bem para evitar a introdução de novos problemas.

Conclusão

A integração de um selecionador de data no seu aplicativo React pode melhorar significativamente a experiência do usuário, fornecendo uma maneira simples e eficaz de selecionar datas. O react-datepicker A biblioteca torna simples adicionar um seletor de data personalizável e elegante ao seu aplicativo com apenas algumas linhas de código.

Experimente com react-datepickerOs vários adereços e opções para utilizar totalmente seu potencial e adaptar o seletor de data para atender perfeitamente às necessidades do seu aplicativo.



Source link