npm Get started

Fast. Lightweight. Framework agnostic.

RollDate

The dependency-free scrolling date picker for modern apps.

Native-like wheel scrolling. Single, range & multi select. Optional time. Popup or inline. Zero runtime dependencies — just JavaScript.

npm install @rolldate/core

Open playground Get started GitHub

MIT License
TS TypeScript
0 Dependencies
npm
Open source

Works with

Vanilla JS
React
Vue
Angular
Svelte
Astro

new RollDate('#cal', { theme: 'dark' })

~11.5 KBgzipped JS

0dependencies

3selection modes

2themes

TSdefinitions

MITlicense

Why RollDate

Selling points, not a feature dump

Native-like scrolling

Wheel and touch scroll through days, months, and years — not another month grid with endless next/prev taps.

Zero dependencies

No React, Vue, jQuery, Moment, or Day.js. Drop in JS + CSS and ship.

Tiny API

new RollDate('#date') — then add options only when you need them.

Haptic feedback

Optional tick on month/year/time changes — vibrate or soft click on supported devices.

One picker, three modes

Single, range, and multi-select without swapping libraries or rewriting your form.

Touch optimized

Built for mobile inertia and desktop wheel. Popup or inline, dark or light.

Why RollDate

Zero dependencies

React
Vue
jQuery
Moment.js
Day.js
CSS frameworks

Just JavaScript.

Works everywhere

Use it in any stack

No official wrappers required — mount it from plain JS inside your framework of choice.

Vanilla JS
React
Vue
Angular
Svelte
Solid
Astro

Made for developers

Modern defaults. Minimal surface.

TypeScript readyShipped with .d.ts definitions
Framework agnosticWorks anywhere JavaScript runs
MIT LicensePersonal and commercial use
Zero dependenciesNo UI kits, no date libs
Modern APIConstructor, options, methods, events
Mobile friendlyScroll + optional haptics

Live demo

Try the real widget

Interactive instances. Switch any card to Code to copy the snippet.

single

Single date

Default popup on one input.

range

Range (one input)

Start and end in a single field.

multi

Multi-select

Toggle several days; stays open while picking.

date+time

Date & time (24h)

Time columns, 5-minute step, footer actions.

trigger

Open via button

External control opens the picker with triggerSelector.

i18n

Custom labels

Override month/weekday names; format follows locale by default.

Example

Tiny API

Easy to learn. No complex configuration required.

app.js

import RollDate from "@rolldate/core";

new RollDate("#date");

View documentation

Configuration

Options by category

Full details live in the API reference.

General

theme
triggerSelector
startDate

Selection

selectType
closeOnSelect

Formatting

locale
dateFormat

Limits

minDate
maxDate
disabledDates

Time

enableTime
use12Hour
timeStep

Events

selectDate
onOpen
onClose
onHoverDate
onViewChange

Comparison

How RollDate fits

A factual snapshot next to common lightweight pickers. Pick what matches your constraints — not a ranking.

	RollDate	Flatpickr	Litepicker
Runtime dependencies	None	None	None
Scroll / wheel day list	Yes	Grid	Grid
Single / range / multi	All three	Single / range / multi	Single / range
Time picker	Built-in	Plugin / built-in	Limited
Popup + inline	Yes	Yes	Yes
License	MIT	MIT	MIT
TypeScript definitions	Yes	Community / partial	Yes
Approx. JS size	~46 KB min / ~11.5 KB gzip	~50 KB+ range*	Smaller*

*Sizes vary by version and plugins. Check each project’s current build for exact numbers.

Chrome
Firefox
Safari
Edge
Modern mobile

Installation

npm, CDN, or ZIP

npm / CDN

# install
npm install @rolldate/core

<!-- or CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolldate/core/dist/css/rolldate.min.css">
<script src="https://cdn.jsdelivr.net/npm/@rolldate/core/dist/js/rolldate.min.js"></script>

<input id="date" placeholder="Select a date">

app.js

import '@rolldate/core/css/min';
import RollDate from '@rolldate/core';

new RollDate('#date', {
  theme: 'dark',
  selectType: 'single',
  selectDate(date) {
    console.log(date);
  },
});

Download ZIP

Standalone package with JS, CSS, and a ready example.

AI agents

MCP for Cursor & other AI IDEs

Agents can install assets, scaffold examples, and pull options/snippets. Package: @rolldate/mcp.

npm

npx -y @rolldate/mcp
npm install @rolldate/mcp

mcp.json

{
  "mcpServers": {
    "rolldate": {
      "command": "npx",
      "args": ["-y", "@rolldate/mcp"]
    }
  }
}

@rolldate/mcp on npm · MCP on GitHub

License

MIT License

Free for personal and commercial use.

RollDate

Selling points, not a feature dump

Native-like scrolling

Zero dependencies

Tiny API

Haptic feedback

One picker, three modes

Touch optimized

Zero dependencies

Use it in any stack

Modern defaults. Minimal surface.

Configure it live

Try the real widget

Single date

Range (one input)

Multi-select

Date & time (24h)

Open via button

Custom labels

Tiny API

Options by category

General

Selection

Formatting

Limits

Time

Events

How RollDate fits

npm, CDN, or ZIP

MCP for Cursor & other AI IDEs

MIT License