ReactDatePickerOutlined

ReactDatePickerOutlined é um componente de inserção e seleção de data estilizado com TailwindCSS, desenvolvido para aplicações React. Ele permite que os usuários insiram manualmente uma data no campo de entrada ou selecionem uma data diretamente de um calendário interativo, garantindo uma interface intuitiva, responsiva e acessível, com suporte a personalização e internacionalização.

📦 Instalação

Você pode instalar o componente via npm:

npm install reactdatepickeroutlined

Certifique-se de que as dependências date-fns, clsx, react e react-dom estão instaladas no seu projeto, pois elas são necessárias para o funcionamento e estilização do componente.

npm install react react-dom date-fns clsx

Além disso, configure o TailwindCSS no seu projeto seguindo a documentação oficial.

🚀 Uso

Aqui está um exemplo básico de como usar o ReactDatePickerOutlined:

import React, { useState } from 'react';
import { ReactDatePickerOutlined } from 'datepickeroutlined';

const App = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  return (
    <div className="p-2">
      <ReactDatePickerOutlined
        format="yyyy/MM/dd"
        label="Date of Birth"
        date={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        placeholder="Select a date"
        calendarIcon
        theme={{
          container: 'border-blue-500',
          label: 'text-blue-500',
          input: 'text-gray-700',
          icon: 'text-blue-500',
          calendar: 'bg-white shadow-lg',
          calendarDay: 'hover:bg-gray-200',
          calendarSelectedDay: 'bg-blue-500 text-white',
          calendarHeader: 'flex justify-between items-center mb-2',
          calendarSelect: 'border rounded px-2',
          calendarLeftIcon: 'text-gray-500',
          calendarRightIcon: 'text-gray-500',
        }}
      />
    </div>
  );
};

export default App;

⚙️ Propriedades

O componente aceita as seguintes propriedades:

| Propriedade | Tipo | Descrição | Padrão | |---------------------------|----------------------------------------|---------------------------------------------------------------------------|-----------------| | date | Date \| null | Data selecionada no componente. | null | | onChange | (date: Date \| null, e: ChangeEvent) => void | Função chamada ao alterar a data selecionada. | - | | label | string | Texto exibido como rótulo acima do campo de entrada. | undefined | | error | string | Mensagem de erro exibida abaixo do campo de entrada. | undefined | | format | 'dd/MM/yyyy' \| 'MM/dd/yyyy' \| 'yyyy/MM/dd' | Formato da data exibida no campo de entrada. | 'yyyy/MM/dd' | | locale | 'en-US' \| 'pt-BR' | Localização para formatação e tradução do calendário. | 'en-US' | | minDate | Date | Data mínima permitida para seleção. | undefined | | maxDate | Date | Data máxima permitida para seleção. | undefined | | placeholder | string | Texto exibido quando nenhuma data está selecionada. | undefined | | disabled | boolean | Desabilita o campo de entrada. | false | | readOnly | boolean | Torna o campo de entrada somente leitura. | false | | calendarIcon | boolean | Exibe ou oculta o ícone de calendário ao lado do campo de entrada. | false | | onOpen | () => void | Função chamada ao abrir o calendário. | undefined | | onClose | () => void | Função chamada ao fechar o calendário. | undefined | | theme | object | Objeto para personalizar estilos do componente. | {} |

🎨 Personalização com Tema

O ReactDatePickerOutlined utiliza o TailwindCSS para estilização, permitindo uma personalização fácil e consistente. A propriedade theme aceita um objeto com as seguintes chaves para personalizar as classes CSS:

• container: Classe aplicada ao contêiner principal.
• label: Classe aplicada ao rótulo.
• input: Classe aplicada ao campo de entrada.
• icon: Classe aplicada ao ícone de calendário.
• calendar: Classe aplicada ao calendário.
• calendarDay: Classe aplicada aos dias do calendário.
• calendarSelectedDay: Classe aplicada ao dia selecionado no calendário.
• calendarHeader: Classe aplicada ao cabeçalho do calendário.
• calendarSelect: Classe aplicada aos elementos <select> do calendário.
• calendarLeftIcon: Classe aplicada ao botão de navegação para o mês anterior.
• calendarRightIcon: Classe aplicada ao botão de navegação para o próximo mês.

Sobrescrevendo Estilos Específicos

Se você precisar sobrescrever estilos específicos do componente, pode usar o modificador !important no TailwindCSS. Isso garante que suas classes personalizadas tenham prioridade sobre os estilos padrão.

Exemplo de Personalização

<ReactDatePickerOutlined
  label="Date of Birth"
  date={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  placeholder="Select a date"
  theme={{
    container: '!border-blue-500',
    label: 'text-blue-500 !font-bold',
    input: 'text-gray-700',
    icon: 'text-blue-500',
    calendar: 'bg-white shadow-lg',
    calendarDay: '!hover:bg-gray-200',
    calendarSelectedDay: 'bg-blue-500 text-white',
    calendarHeader: 'flex justify-between items-center mb-2',
    calendarSelect: 'border rounded px-2',
    calendarLeftIcon: 'text-gray-500',
    calendarRightIcon: 'text-gray-500',
  }}
/>

🛠️ Exemplos Avançados

Exemplo com Data Mínima e Máxima

<ReactDatePickerOutlined
  label="Selecione uma data"
  date={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  minDate={new Date(2023, 0, 1)}
  maxDate={new Date(2023, 11, 31)}
  locale="pt-BR"
/>

Exemplo com Mensagem de Erro

<ReactDatePickerOutlined
  label="Data de Nascimento"
  date={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  error="Data inválida"
  placeholder="Selecione uma data"
/>

🛠️ Desenvolvimento

Scripts Disponíveis

• npm run build: Compila o código TypeScript e transpila para JavaScript usando Babel.
• npm run prepublishOnly: Garante que o build seja executado antes de publicar no npm.
• npm test: Executa os testes.

Estrutura do Projeto

datePickerOutlined/
├── dist/                # Arquivos compilados
├── src/                 # Código-fonte do componente
│   └── ReactDatePickerOutlined.tsx
├── package.json         # Configuração do npm
├── .babelrc             # Configuração do Babel
├── tsconfig.json        # Configuração do TypeScript
└── README.md            # Documentação do componente

🤝 Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou enviar pull requests.

📄 Licença

Este projeto está licenciado sob a licença MIT. Consulte o arquivo LICENSE para mais detalhes.

Desenvolvido com ❤️ por Joannegton.