Um Seletor de Data e Hora Limpo Sem Dependências Pesadas

Toda vez que um projeto precisa de um seletor de datas, a mesma história se repete. O <input type="date"> nativo parece diferente em cada navegador, a personalização é dolorosa e ele se comporta de forma imprevisível em plataformas móveis. Puxar bibliotecas de UI monstruosas ou wrappers desatualizados com dezenas de pacotes transitórios apenas para um simples calendário parece errado.

Recentemente encontrei o repositório vanilla-calendar-pro. É um componente TypeScript limpo para seleção de data e hora com zero dependências externas. Funciona em JavaScript puro, assim como dentro de React, Vue ou Svelte.

O Que Tem Dentro e Por Que É Conveniente

A biblioteca foi construída para cobrir necessidades básicas de interface sem inflar o bundle. O calendário pesa apenas alguns kilobytes, mas pode fazer quase tudo que designers e gerentes de produto normalmente precisam.

Aqui estão os principais destaques:

• Zero dependências. Sem utilitários de parsing de data de terceiros como moment ou date-fns, usa o Intl nativo por baixo dos panos.
• Modos de exibição flexíveis. O calendário pode ser embutido diretamente na marcação da página ou aberto em um popup ao clicar em um input.
• Seleção de intervalo e vários meses de uma vez. Ótimo para reservas de hotel, compras de passagens ou dashboards de analytics.
• Seletor de horário integrado. O tempo pode ser configurado tanto no formato 24 horas quanto AM/PM.
• Temas. Existem temas claros e escuros prontos para uso, e a personalização é feita através de variáveis CSS padrão.

Início Rápido

A instalação é padrão via qualquer gerenciador de pacotes:

npm install vanilla-calendar-pro

Se você não tem um bundler, pode incluir o script e os estilos diretamente via CDN.

Na marcação, você só precisa criar um container vazio:

<div id="calendar"></div>

A inicialização no código fica limpa:

import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    lang: 'ru-RU',
    iso8601: true,
    selection: {
      day: 'multiple-ranged',
    },
  },
  actions: {
    clickDay(event, self) {
      console.log('Выбранные даты:', self.selectedDates);
    },
  },
});

calendar.init();

Apenas algumas linhas de configuração, e temos um calendário funcionando com suporte a seleção de intervalo e localização em russo.

Personalizando para Tarefas Específicas

Um problema comum com componentes prontos é que sair do design padrão vira um pesadelo. No vanilla-calendar-pro, a estrutura DOM pode ser reconstruída para atender às suas necessidades usando layouts personalizados.

Por exemplo, se você precisa desabilitar datas passadas e bloquear fins de semana, as configurações são passadas diretamente no objeto de configuração:

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    range: {
      min: 'today',
      disabled: ['2026-05-01', '2026-05-09'],
    },
    selection: {
      time: 24,
    },
  },
  actions: {
    changeTime(event, self) {
      console.log('Установленное время:', self.selectedTime);
    },
  },
});

calendar.init();

O componente lida graciosamente com atualizações dinâmicas de parâmetros. Se o usuário trocar o idioma no app, você simplesmente chama o método update() com novas opções sem um redesenho completo da página ou vazamentos de memória.

Integração com Frameworks

Embora vanilla esteja no nome, o autor se certificou de que é conveniente trabalhar com bibliotecas reativas.

No React, o calendário facilmente envolve em um hook useEffect:

import { useEffect, useRef } from 'react';
import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

export function DatePicker({ onSelect }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const calendar = new VanillaCalendar(containerRef.current, {
      actions: {
        clickDay(event, self) {
          onSelect(self.selectedDates);
        },
      },
    });

    calendar.init();

    return () => {
      calendar.destroy();
    };
  }, [onSelect]);

  return <div ref={containerRef} />;
}

O método destroy() limpa corretamente os event handlers, então o componente não deixa lixo na memória no unmount.

Quem Vai Encontrar Útil

O projeto preenche a lacuna entre os gigantes de UI pesados e os inputs nativos primitivos. Se você está escrevendo um projeto pessoal, construindo uma landing page ou fazendo um painel administrativo onde não quer puxar componentes volumosos, este é um ótimo candidato.

O codebase é totalmente tipado, os fontes são abertos e a documentação no site oficial cobre completamente todos os métodos da API e exemplos de estilização. Vale favoritar para o próximo sprint.