DEV Community

Cover image for Tired of HTML date pickers making users click 50+ times to change a birth year?
Kevin
Kevin

Posted on

Tired of HTML date pickers making users click 50+ times to change a birth year?

#javascript #typescript #npm #webdev

Hey DEV community! 👋

I've been frustrated with <input type="date"> UX—endless clicking through months/years for birth dates or appointments. Users hate navigating calendars for non-recent dates. So I created Easy Picker: clean select dropdowns for month/day/year (or custom formats). Vanilla JS/TS, zero deps, works everywhere.​

The Problem

<!-- Looks innocent... -->
<input type="date">
<!-- But selecting 1990? 420+ month clicks. Mobile nightmare. -->
Enter fullscreen mode Exit fullscreen mode

The Fix
Direct selects. No navigation hell.

import EasyPicker from '@kevinagyeman/easy-picker'

const picker = new EasyPicker('#date-picker', {
  returnFormat: 'iso',
  onChange: (isoString) => console.log(isoString) // 2025-03-15T12:00:00.000Z
})
Enter fullscreen mode Exit fullscreen mode

Key features:

  • React/Vue/Svelte/vanilla compatible
  • Timezone-safe (no off-by-one bugs)
  • Formats: ISO/Date/timestamp/YY-MM-DD
  • Tailwind/Bootstrap/CSS styling
  • Full TypeScript​​

Try it: npm i @kevinagyeman/easy-picker
Repo: https://github.com/kevinagyeman/easy-picker​

Open Questions for Feedback
This is v1—love your thoughts!

  • Better mobile handling? Touch events?
  • Time picker addition? Range support?
  • Edge cases I'm missing (locales, leap years)?
  • Bundle size optimizations?
  • Framework wrappers needed?

Built it to solve a real pain in my projects. Would this help yours? Issues/PRs welcome! 🙏​

Top comments (0)