DateTimePicker-dg

Este é um componente de seleção de data e horário altamente personalizável, compatível com todos os navegadores e projetado para integração fácil em projetos React.

📦 Instalação

Instale o pacote via npm:

npm install date-time-picker-dg

Ou via Yarn:

yarn add date-time-picker-dg

🚀 Uso Básico

Aqui está um exemplo de como usar o DateTimePicker em seu projeto React:

import React, { useState } from "react";
import DateTimePicker from "date-time-picker-dg";

const App = () => {
  const [datetime, setDatetime] = useState("");

  return (
    <div>
      <h1>Escolha a data e o horário</h1>
      <DateTimePicker
        onChange={(datetime) => setDatetime(datetime)}
      />
      <p>Data e Hora selecionadas: {datetime}</p>
    </div>
  );
};

export default App;

⚙️ Propriedades do Componente

| Propriedade | Tipo | Descrição | Valor Padrão | |------------------------------|-------------------------------|-------------------------------------------------------------------------|-----------------| | value | string | Valor inicial da data e hora no formato YYYY-MM-DD HH:mm. | undefined | | formatType | "ISO8601" | "ISO9075" | "UTC" | "timestamp" | Formato de saída da data e hora. | "ISO8601" | | className | string | Classe CSS personalizada para o input de data. | undefined | | containerClassName | string | Classe CSS para o container do DateTimePicker. | undefined | | timePickerClassName | string | Classe CSS para o input do CustomTimePicker. | undefined | | timePickerContainerClassName | string | Classe CSS para o container do CustomTimePicker. | undefined | | onChange | (datetime: string) => void | Função chamada ao selecionar uma data e hora. Retorna a string formatada. | Obrigatório |

💡 Exemplos de Uso

🔹 Com valores padrão

<DateTimePicker
  onChange={(datetime) => console.log(`Data e Hora selecionadas: ${datetime}`)}
/>

🎨 Personalizado

<DateTimePicker
  value="2025-02-15 08:30"
	formatType="UTC"
	className="flex w-max h-[38px] "
	containerClassName=" flex w-max flex-row border px-2 rounded-md items-center gap-2"
	timePickerClassName="flex w-max h-[38px] !p-0 !border-none !gap-1 "
	timePickerContainerClassName="!absolute !left-0 !right-0 !z-50 !mt-10 !w-max"
	onChange={(datetime) =>
		console.log(`Data e Hora selecionadas: ${datetime}`)
	}
/>

🎨 Estilização

O componente permite que o usuário defina estilos próprios, ao invés de trazer um CSS embutido. Para personalizar, basta sobrescrever os estilos do botão e do dropdown com seu próprio CSS:

Exemplo de Sobrescrita com Tailwind CSS

.custom-datetimepicker-input {
  @apply bg-blue-500 text-white border border-blue-600 hover:bg-blue-700;
}

.custom-datetimepicker-container {
  @apply bg-white border border-gray-300 shadow-lg rounded-md;
}

Exemplo de Sobrescrita com CSS Puro

.custom-datetimepicker-input {
  background-color: #3b82f6;
  color: white;
  border: 1px solid #2563eb;
}

.custom-datetimepicker-container {
  background-color: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

🎯 Funcionalidades

• ✅ Totalmente personalizável com cores e classes CSS.
• ✅ Compatível com todos os navegadores modernos.
• ✅ Responsivo e fácil de adaptar a qualquer design.
• ✅ Efeitos suaves de fade-in e fade-out no dropdown.
• ✅ Fecha automaticamente ao clicar fora.

📜 Licença

Este projeto está licenciado sob a MIT License.

🛠 Desenvolvido com ❤️ por David Gilmar Jr.