Czysty wybieracz daty i godziny bez ciężkich zależności

Za każdym razem, gdy projekt wymaga wybieracza daty, rozgrywa się ta sama historia. Natywny <input type="date"> wygląda inaczej w każdej przeglądarce, dostosowanie go do własnych potrzeb jest bolesne, a na urządzeniach mobilnych zachowuje się nieprzewidywalnie. Ściąganie ogromnych bibliotek UI lub przestarzałych wrapperów z dziesiątkami zależności tylko dla prostego kalendarza wydaje się błędne.

Ostatnio natknąłem się na repozytorium vanilla-calendar-pro. To czysty komponent w TypeScripcie do wyboru daty i godziny bez zewnętrznych zależności. Działa zarówno w czystym JavaScript, jak i wewnątrz React, Vue czy Svelte.

Co w środku i dlaczego to wygodne

Biblioteka została zbudowana tak, aby zaspokoić podstawowe potrzeby interfejsu bez rozdęcia bundle'a. Kalendarz waży zaledwie kilka kilobajtów, a potrafi prawie wszystko, czego zazwyczaj wymagają projektanci i product managerowie.

Oto główne wyróżniające się funkcje:

• Brak zależności. Żadnych zewnętrznych bibliotek do parsowania dat jak moment czy date-fns, korzysta z natywnego Intl.
• Elastyczne tryby wyświetlania. Kalendarz można osadzić bezpośrednio w markupie strony lub otworzyć jako popup po kliknięciu pola input.
• Wybór zakresu i wiele miesięcy na raz. Świetnie sprawdza się przy rezerwacjach hotelowych, zakupie biletów czy dashboardach analitycznych.
• Wbudowany wybieracz czasu. Czas można skonfigurować zarówno w formacie 24-godzinnym, jak i AM/PM.
• Motywy. Dostępne są gotowe motywy jasny i ciemny, a dostosowanie odbywa się przez standardowe zmienne CSS.

Szybki start

Instalacja jest standardowa poprzez dowolny menedżer pakietów:

npm install vanilla-calendar-pro

Jeśli nie masz bundlera, możesz dołączyć skrypt i style bezpośrednio przez CDN.

W markupie wystarczy utworzyć pusty kontener:

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

Inicjalizacja w kodzie wygląda czysto:

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();

Zaledwie kilka linijek konfiguracji, a mamy działający kalendarz z obsługą wyboru zakresu i rosyjską lokalizacją.

Dostosowanie do konkretnych zadań

Jednym częstym problemem z gotowymi komponentami jest to, że wyjście poza standardowy design staje się koszmarem. W vanilla-calendar-pro strukturę DOM można przebudować pod własne potrzeby za pomocą niestandardowych układów.

Na przykład, jeśli musisz wyłączyć przeszłe daty i zablokować weekendy, ustawienia przekazuje się bezpośrednio do obiektu konfiguracyjnego:

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();

Komponent elegancko obsługuje dynamiczne aktualizacje parametrów. Jeśli użytkownik zmieni język w aplikacji, wystarczy wywołać metodę update() z nowymi opcjami bez pełnego przerysowania strony czy wycieków pamięci.

Integracja z frameworkami

Mimo że vanilla jest w nazwie, autor zadbał o to, żeby wygodnie pracowało się z bibliotekami reaktywnymi.

W React kalendarz łatwo owrapować w 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} />;
}

Metoda destroy() poprawnie sprząta event handlery, więc komponent nie zostawia śmieci w pamięci przy odmontowaniu.

Kto znajdzie to przydatne

Projekt wypełnia lukę między ciężkimi gigantami UI a prymitywnymi natywnymi inputami. Jeśli piszesz projekt hobbystyczny, budujesz landing page lub tworzysz panel administracyjny, gdzie nie chcesz ściągać rozbudowanych komponentów, to świetny kandydat.

Kod źródłowy jest w pełni typowany, źródła są otwarte, a dokumentacja na oficjalnej stronie szczegółowo pokrywa wszystkie metody API i przykłady stylów. Warto dodać do zakładek na następny sprint.