DatePickerOutlined

DatePickerOutlined é um componente de seleção de data estilizado com bordas destacadas, desenvolvido para aplicações React. Ele oferece uma interface intuitiva e responsiva para selecionar datas, com suporte a personalização, acessibilidade e internacionalização.

📦 Instalação

Você pode instalar o componente via npm:

npm install datepickeroutlined

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 do componente.

npm install react react-dom date-fns clsx

🚀 Uso

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

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

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

  return (
    <div>
      <h1>Selecione uma Data</h1>
      <ReactDatePickerOutlined
        label="Data de Nascimento"
        date={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        placeholder="Selecione uma data"
        locale="pt-BR"
        calendarIcon={true}
        theme={{
          container: 'border-blue-500',
          label: 'text-blue-500',
        }}
      />
    </div>
  );
};

export default App;

⚙️ Propriedades

O componente aceita as seguintes propriedades:

| Propriedade | Tipo | Descrição | Padrão | |---------------------------|----------------------------------------|---------------------------------------------------------------------------|-----------------| | date | Date \| null | Data selecionada. | null | | onChange | (date: Date \| null, e: ChangeEvent) => void | Função chamada ao selecionar uma data. | - | | label | string | Rótulo exibido acima do campo de entrada. | undefined | | error | string | Mensagem de erro exibida abaixo do campo. | undefined | | format | 'dd/MM/yyyy' \| 'MM/dd/yyyy' \| 'yyyy/MM/dd' | Formato da data exibida no campo. | 'MM/dd/yyyy' | | locale | 'en-US' \| 'pt-BR' | Localização para formatação e tradução. | '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 somente leitura. | false | | calendarIcon | boolean | Exibe ou oculta o ícone de calendário. | false | | labelClassName | string | Classe CSS adicional para estilização do rótulo. | undefined | | inputClassName | string | Classe CSS adicional para estilização do campo de entrada. | undefined | | containerClassName | string | Classe CSS adicional para estilização do contêiner. | undefined | | onOpen | () => void | Função chamada ao abrir o calendário. | undefined | | onClose | () => void | Função chamada ao fechar o calendário. | undefined | | weekdays | string[] | Nomes dos dias da semana exibidos no calendário. | ['Sun', ...] | | theme | object | Personaliza estilos do componente. | {} |

🎨 Estilização

O componente utiliza classes CSS padrão para estilização. Você pode personalizá-lo adicionando classes CSS através das propriedades className.

Exemplo de estilização personalizada:

.custom-class {
  border-color: #4caf50;
  background-color: #f9f9f9;
}

🛠️ 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.