DEV Community

RollDate
RollDate

Posted on

I Built a Date Picker, Got 1,000+ npm Downloads, and Then Discovered the Hard Part

Building an open-source project is one thing.

Getting people to actually discover it is a completely different problem.

A few weeks ago, I started working on RollDate, a dependency-free JavaScript date picker built around a scroll-first interaction model.

Try RollDate

The project has now passed 1,000 npm downloads, and I recently launched it on Product Hunt.

RollDate on Product Hunt

This isn't a "we made it" story.

It's about what I'm learning while trying to get a small open-source developer tool in front of real developers.


Why another date picker?

This is probably the first question that comes to mind.

There are already plenty of excellent date pickers for JavaScript.

So why build another one?

For me, the answer wasn't that existing date pickers are bad.

It was the interaction model.

Most JavaScript date pickers are built around the traditional calendar grid. You click a date, navigate with arrows, switch months, and repeat.

I wanted to experiment with something closer to the interaction we already know from native mobile controls:

scrolling.

With RollDate, you can scroll through days, months and years while still having the functionality you'd expect from a complete date picker.

The goal isn't to replace every existing solution.

It's to provide a different option.


What is RollDate?

RollDate is a JavaScript date picker with a focus on scroll-first interaction.

It works without React, Vue, jQuery, or other UI dependencies.

The core package supports:

  • Single date selection
  • Range selection
  • Multiple date selection
  • Date and time selection
  • 12-hour and 24-hour time
  • Custom minute steps
  • Disabled dates
  • Minimum and maximum dates
  • Localization
  • Custom date formats
  • Light and dark themes
  • Popup and inline modes
  • Highlighted dates
  • Multiple event dots per day
  • Range presets
  • TypeScript definitions
  • Haptic feedback

The latest 1.1.0 release also added API methods such as:


js
picker.goToDate(date)
picker.getValue()
picker.setValue(value)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)