Calendar Input

Entrada de Data

Componente de entrada de data com formatação automática e seletor de calendário integrado.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add calendar-input

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Exemplo Interativo

Experimente diferentes usos do Calendar Input

Data de Início

Data Pré-selecionada

Data de Vencimento

Uso Básico

Implementação simples do Calendar Input

"use client";

import { useState } from "react";
import { CalendarInput } from "@/components/ui/calendar-input";

export function CalendarInputExample() {
  const [date, setDate] = useState<Date | undefined>(undefined);

  return (
    <CalendarInput
      value={date}
      onChange={setDate}
      placeholder="dd/mm/aaaa"
    />
  );
}

Recursos

Funcionalidades do componente

✓Formatação automática dd/mm/aaaa enquanto digita
✓Validação de data em tempo real
✓Seletor de calendário com dropdowns de mês/ano
✓Indicação visual de data válida/inválida
✓Compatível com formulários e dialogs
✓Suporte a temas (light/dark/contrast)