@tito10047/vanilla-js-datepicker

📖 Documentation · ▶ Live Demo

Lightweight, dependency-free date picker for vanilla JavaScript and TypeScript.

Features

• Zero dependencies — no jQuery, no Moment, no framework required.
• TypeScript first — written in TypeScript, ships full declaration files.
• Async lifecycle hooks — onBeforeOpen, onOpen, onCellRender, onBeforeChange, and validate accept Promises.
• Instant calendar render — calendar appears immediately; onCellRender decorates cells asynchronously without blocking the UI.
• Range & multi-date selection — mode: 'range' or mode: 'multiple'.
• Fully customizable CSS classes — every DOM element's class is configurable via classNames option (Tailwind-friendly).
• Full keyboard navigation — arrows move by day/week, PageUp/PageDown by month (+Shift by year), Enter/Space selects, Escape closes, Tab stays trapped inside the calendar. Opening the calendar highlights nothing until you press a key. See Keyboard & focus.
• Fully accessible — ARIA dialog, grid roles, live-region announcements.
• CSS-variable theming — light, dark, and auto (system) themes.
• Internationalization — built-in SK, EN, CS, DE; register any custom locale.
• Multiple formats — ESM, CommonJS, and UMD builds.

Installation

npm install @tito10047/vanilla-js-datepicker

Quick start

import { Datepicker } from '@tito10047/vanilla-js-datepicker'
import '@tito10047/vanilla-js-datepicker/dist/datepicker.css'

const dp = new Datepicker('#departure', {
  format: 'DD.MM.YYYY',
  locale: 'sk',
  showTodayButton: true,
  showClearButton: true,
  onChange: (value) => {
    console.log('Selected:', value)
  },
})

<input id="departure" type="text" placeholder="DD.MM.YYYY" />

CDN (no build step)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tito10047/vanilla-js-datepicker/dist/datepicker.css" />
<script type="module">
  import { Datepicker } from 'https://cdn.jsdelivr.net/npm/@tito10047/vanilla-js-datepicker/dist/datepicker.esm.js'
  new Datepicker('#date', { showTodayButton: true })
</script>

Documentation

Full documentation: https://tito10047.github.io/vanilla-js-datepicker/

Live demo (12 interactive examples): https://tito10047.github.io/vanilla-js-datepicker/demo/

• Getting Started
• Options
• Events
• Localization
• Theming
• API Reference
• Cookbook:
  • Range Picker
  • Multiple Selection
  • Async Cell Render
  • Disabled Dates
  • Inline Calendar

Related

Looking for a time picker? Check out @tito10047/vanilla-js-timepicker — a companion library with the same zero-dependency philosophy.

License

MIT © 2026 tito10047