DatePicker · Eyes

Visualizar

import { DatePicker } from "@vincisys/eyeson";

export function DatePickerBasicDemo() {
	return (
		<div className="max-w-xs">
			<DatePicker label="Data do voo" />
		</div>
	);
}

Instalação

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

Uso

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

export function Example() {
return <DatePicker label="Data do voo" />;
}

Exemplos

Básico

Visualizar

import { DatePicker } from "@vincisys/eyeson";

export function DatePickerBasicDemo() {
	return (
		<div className="max-w-xs">
			<DatePicker label="Data do voo" />
		</div>
	);
}

Label fora (`labelVariant="outside"`)

Data do documento*

Visualizar

import { DatePicker } from "@vincisys/eyeson";

export function DatePickerOutsideDemo() {
	return (
		<div className="max-w-xs">
			<DatePicker
				label="Data do documento"
				placeholder="Selecione uma data"
				labelVariant="outside"
				required
			/>
		</div>
	);
}

Controlado

08/06/2026

Visualizar

import { DatePicker } from "@vincisys/eyeson";
import { useState } from "react";

export function DatePickerControlledDemo() {
	const [date, setDate] = useState<Date | null>(new Date(2026, 5, 8));

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

Estados

Selecione uma data válida

Visualizar

import { DatePicker } from "@vincisys/eyeson";

export function DatePickerStatesDemo() {
	return (
		<div className="flex max-w-xs flex-col gap-4">
			<DatePicker label="Padrão" />
			<DatePicker
				label="Válido"
				state="valid"
				defaultValue={new Date(2026, 5, 8)}
			/>
			<DatePicker
				label="Inválido"
				state="invalid"
				errorMessage="Selecione uma data válida"
			/>
			<DatePicker label="Desabilitado" disabled />
		</div>
	);
}

Tamanhos

size aceita sm, md (padrão) e lg, combinando com Input e Select.

Visualizar

import { DatePicker } from "@vincisys/eyeson";

export function DatePickerSizesDemo() {
	return (
		<div className="flex max-w-xs flex-col gap-4">
			<DatePicker label="Pequeno" size="sm" />
			<DatePicker label="Médio" size="md" />
			<DatePicker label="Grande" size="lg" />
		</div>
	);
}

Use mode="range" para selecionar um período — o primeiro clique define o início, o segundo define o fim (cliques fora da ordem reorganizam automaticamente). value/onValueChange passam a trabalhar com { from, to }.

import { DatePicker, type DateRange } from '@vincisys/eyeson';
import { useState } from 'react';

export function Example() {
const [range, setRange] = useState<DateRange | null>(null);
return (
  <DatePicker
    mode="range"
    label="Período"
    value={range}
    onValueChange={setRange}
  />
);
}

Nenhum período selecionado

Visualizar

import { DatePicker, DateRange } from "@vincisys/eyeson";
import { useState } from "react";

export function DatePickerRangeDemo() {
	const [range, setRange] = useState<DateRange | null>(null);

	return (
		<div className="flex max-w-xs flex-col gap-2">
			<DatePicker
				mode="range"
				label="Período"
				value={range}
				onValueChange={setRange}
			/>
			<p className="text-sm text-eds-neutral-elements">
				{range?.from
					? `${range.from.toLocaleDateString('pt-BR')} — ${
							range.to
								? range.to.toLocaleDateString('pt-BR')
								: '…'
						}`
					: 'Nenhum período selecionado'}
			</p>
		</div>
	);
}

Intervalo com atalhos e dois meses

numberOfMonths mostra vários meses lado a lado e presets adiciona uma coluna de atalhos (ex.: “Últimos 7 dias”) — cada um aplica o intervalo imediatamente, sem fechar o popover, para facilitar comparar opções.

Visualizar

import { DatePicker, DateRange } from "@vincisys/eyeson";
import { useState } from "react";

export function DatePickerRangePresetsDemo() {
	const [range, setRange] = useState<DateRange | null>(null);

	return (
		<div className="max-w-xs">
			<DatePicker
				mode="range"
				label="Período"
				value={range}
				onValueChange={setRange}
				numberOfMonths={2}
				presets={rangePresets}
			/>
		</div>
	);
}