Vanilla UI Kit DatePicker v1.0.0

One file.
Every date.

A zero-dependency date picker for vanilla JavaScript. Drop in one script tag, point it at an input, done. It follows your page's light or dark theme on its own — flip the switch above and watch.

<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/datepicker/datepicker.js"></script> <input id="date"> <script>new DatePicker('#date')</script>

Examples

Every card is live — click into the inputs.

Basic

Defaults: ISO format, browser locale, automatic theme.

new DatePicker('#ex-basic')

Format & locale

Token formats, month names from Intl — no locale bundles.

new DatePicker('#ex-format', { format: 'MMMM D, YYYY' })
new DatePicker('#ex-locale', { format: 'DD/MM/YYYY', locale: 'fr' })

Range selection

Two clicks, hover preview, one input.

new DatePicker('#ex-range', { range: true })

Two panes & presets

Side-by-side months with a quick-select rail — the booking-site classic.

new DatePicker('#ex-multipane', {
  range: true,
  panes: 2,
  presets: true   // or your own [{label, range}]
})

Zero-JS range picker

The whole thing — range, two panes, presets — from attributes alone.

<input data-datepicker data-range
       data-panes="2"
       data-presets="last7,last30,thisMonth,lastMonth">

Constraints

Bookable window: today through +90 days, weekends off.

new DatePicker('#ex-min', {
  min: 'today',
  max: new Date(Date.now() + 90 * 864e5),
  disabledDays: [0, 6]
})

Week numbers, Monday first

ISO-8601 week numbers in the left rail.

new DatePicker('#ex-weeks', { weekNumbers: true, firstDay: 1 })

Theme override & accent

Pin a theme regardless of the page, or restyle the accent.

new DatePicker('#ex-dark', { theme: 'dark' })
new DatePicker('#ex-accent', { accent: '#0f766e' })

Zero-JS auto-init

Data attributes only — no script written for this input.

<input data-datepicker
       data-format="DD MMM YYYY"
       data-min="today">

Events & API

Callbacks, custom events, and instance methods.

Nothing selected yet 
const dp = new DatePicker('#ex-events', {
  onSelect: (date, text) => show(text)
})
dp.open()
dp.setDate('today')
dp.getDate() // Date object

Inline calendar

Point it at a container instead of an input.

<div id="ex-inline"></div>
new DatePicker('#ex-inline', {
  onSelect: (d, text) => console.log(text)
})