Native-like scrolling
Wheel and touch through days, months, and years — with optional haptic feedback on supported devices.
Scroll-first · Zero dependencies · TypeScript
Scrolling JavaScript Date Picker
A modern, lightweight JavaScript date picker with single, range, multiple and time selection.
Native-like wheel scrolling on mobile and desktop. Popup or inline. No React, Vue, or date libraries required.
MIT · ~14 KB gzip · Works with any stack
new RollDate('#cal', { theme: 'main' })
Why RollDate
Built for scroll UX, not another grid
Single, range & multi
One picker for every selection mode. Optional time picker with 12h/24h and side or bottom layout.
Zero dependencies
Drop in JS + CSS. No Moment, Day.js, React, or UI kits. TypeScript definitions included.
Features
Everything you need in one package
- Highlighted datesDot markers with multiple colors per day
- Range presetsQuick filters tied to visible month
- LocalizationCustom month/weekday labels and locale formats
- Three themesMain, dark, and light — no extra CSS framework
- Popup or inlineAttach to inputs or render inside any container
- Runtime APIopen/close, disable dates, getValue, goToDate, and more
Full option list in the documentation.
Quick start
Install in seconds
import '@rolldate/core/css/min'; import RollDate from '@rolldate/core'; new RollDate('#date', { theme: 'main' });
Also from RollDate
Need a full event calendar?
RollDate Events provides Month, Week, Day and Agenda views for scheduling interfaces, with continuous navigation, responsive layouts, TypeScript, and zero runtime dependencies.
Free · MIT · Stable 1.0
Try it before you install
Explore live examples or generate code in the playground.