DateTimePicker
@vincisys/eyeson

DateTimePicker

Campo de seleção de data e hora com calendário e colunas de horário.

Data de pagamentoddmmaaaahhmm
Visualizar 
import { DateTimePicker } from "@vincisys/eyeson";

export function DateTimePickerBasicDemo() {
	return (
		<div className="max-w-xs">
			<DateTimePicker label="Data de pagamento" />
		</div>
	);
}

Instalação

import { DateTimePicker } from '@vincisys/eyeson';

Uso

import { DateTimePicker } from '@vincisys/eyeson';

export function Example() {
return <DateTimePicker label="Data de pagamento" />;
}

O popover combina o calendário com a seleção de horário. Por padrão (timeVariant="clock") essa seleção usa um relógio analógico (arrastar ou tocar nos números), no mesmo padrão do TimeClock do MUI X Date Pickers já usado hoje pelo sistema; com timeVariant="list" ela usa colunas de hora e minuto. A seleção atualiza o valor imediatamente e, ao selecionar o minuto, o popover fecha automaticamente com o valor escolhido — não é preciso clicar em Confirmar. Use Confirmar para fechar sem alterar o minuto (ex.: após só trocar o dia ou a hora) ou Agora para preencher com o momento atual. O intervalo de minutos padrão é 5 (minuteStep).

Exemplos

Básico

Data de pagamentoddmmaaaahhmm
Visualizar 
import { DateTimePicker } from "@vincisys/eyeson";

export function DateTimePickerBasicDemo() {
	return (
		<div className="max-w-xs">
			<DateTimePicker label="Data de pagamento" />
		</div>
	);
}

Label fora (labelVariant="outside")

ddmmaaaahhmm
Visualizar 
import { DateTimePicker } from "@vincisys/eyeson";

export function DateTimePickerOutsideDemo() {
	return (
		<div className="max-w-xs">
			<DateTimePicker
				label="Data de pagamento"
				placeholder="Selecione data e hora"
				labelVariant="outside"
				required
			/>
		</div>
	);
}

Colunas de hora/minuto (timeVariant="list")

ddmmaaaahhmm
Visualizar 
import { DateTimePicker } from "@vincisys/eyeson";

export function DateTimePickerListDemo() {
	return (
		<div className="max-w-xs">
			<DateTimePicker
				label="Data e hora"
				labelVariant="outside"
				timeVariant="list"
			/>
		</div>
	);
}

Controlado

Data e hora080620261430

08/06/2026, 14:30:00
Visualizar 
import { DateTimePicker } from "@vincisys/eyeson";
import { useState } from "react";

export function DateTimePickerControlledDemo() {
	const [value, setValue] = useState<Date | null>(
		new Date(2026, 5, 8, 14, 30),
	);

	return (
		<div className="flex max-w-xs flex-col gap-2">
			<DateTimePicker
				label="Data e hora"
				value={value}
				onValueChange={setValue}
			/>
			<p className="text-sm text-eds-neutral-elements">
				{value
					? value.toLocaleString('pt-BR')
					: 'Nenhuma data selecionada'}
			</p>
		</div>
	);
}