Why I Built Yet Another JavaScript Date Picker

Every developer has had this moment.

You need a date picker, so you start searching.

You find one that’s perfect… until you realize it requires React.

Or Vue.

Or jQuery.

Or an entire date library just to select a few dates.

After trying several solutions, I kept asking myself:

Why is such a common UI component often more complicated than it needs to be?

So I decided to build my own.

Meet RollDate.

The Goal

I didn’t want to create “another date picker.”

I wanted to build something that I would actually enjoy using in my own projects.

The goals were simple:

• Infinite scroll
• Zero framework dependencies
• Simple API
• Modern UI
• Mobile-friendly scrolling
• TypeScript support
• Easy customization
• Good documentation

Why Scrolling?

Most date pickers rely on clicking tiny arrows or dropdowns.

On mobile devices, this often feels awkward.

I wanted something closer to native mobile pickers, where changing the month or year is just a smooth scroll.

That became one of RollDate’s core ideas.

More Than Just Picking a Date

While building the component, I realized different projects need different selection modes.

So instead of maintaining separate components, RollDate supports:

• Single date selection
• Date range selection
• Multiple date selection

The API stays the same regardless of the mode.

new RollDate("#date", {
    selectType: "range"
});

Enter fullscreen mode Exit fullscreen mode

Optional Time Picker

Many date pickers force you to install another plugin if you need time selection.

I wanted it built in.

RollDate supports:

• 24-hour mode
• 12-hour AM/PM mode
• Configurable minute steps

Enable it with one option.

new RollDate("#date", {
    enableTime: true
});

Enter fullscreen mode Exit fullscreen mode

Dependency-Free

One of the main design goals was keeping the library independent.

No React.

No Vue.

No jQuery.

No Moment.js.

No Day.js.

Just plain JavaScript.

That means it works almost anywhere:

• Vanilla JavaScript
• React
• Vue
• Angular
• Svelte
• Astro
• …or any framework capable of using DOM components.

A Better Developer Experience

I care a lot about developer experience.

That’s why I spent almost as much time on documentation as on the component itself.

The project includes:

• Interactive live demo
• Configuration playground
• Generated code examples
• TypeScript definitions
• Complete documentation

One feature I especially like is the playground.

As you change options, the generated JavaScript configuration updates automatically, making it easy to understand how each option works.

What I Learned

Building a date picker turned out to be much more challenging than I expected.

Not because rendering a calendar is difficult.

The hard part is handling all the edge cases:

• Date ranges
• Disabled dates
• Localization
• Keyboard and mouse interactions
• Time selection
• Different display modes
• Consistent API design

The UI itself is only a small part of the work.

The Result

RollDate currently supports:

• ✅ Single, Range & Multi selection
• ✅ Popup & Inline modes
• ✅ Optional Time Picker
• ✅ Light & Dark themes
• ✅ Localization
• ✅ Runtime API
• ✅ TypeScript
• ✅ Zero dependencies

I’m continuing to improve the project and would genuinely appreciate feedback from other developers.

If you have suggestions, ideas, or things you’d do differently, I’d love to hear them.

Links

🌐 Live Demo: https://rolldate-demo.vercel.app/

📦 npm: https://www.npmjs.com/package/@rolldate/core

⭐ GitHub: https://github.com/Abramov-Front-end/rolldate-core

Thanks for reading!