A date picker seems like the thing you must grab a library for. You don't — the whole calendar is two lines of Date math. Here's one built from scratch, with keyboard nav and month navigation.
📅 Try it: https://dev48v.infy.uk/design/day19-date-picker.html
The two lines that build any month
const firstWeekday = new Date(year, month, 1).getDay(); // where day 1 sits
const daysInMonth = new Date(year, month + 1, 0).getDate(); // last day of month
new Date(year, month+1, 0) is "day 0 of next month" = the last day of this month — and it handles leap years for free (Feb 2024 → 29, Feb 2025 → 28).
Building the grid
Lay out a 6×7 grid: pad the front with firstWeekday blank cells so day 1 lands under the right weekday, then fill 1…daysInMonth. Highlight today and the selected day; prev/next arrows just change the month (and roll the year over at the boundaries).
The gotcha
JavaScript months are 0-indexed (January = 0). That one fact causes half of all date bugs.
Add keyboard arrows, click-outside-to-close, and a min-date toggle, and you've got a real picker — no dependency.
🔨 Full build (Date math → grid offset → select/format → month nav) on the page: https://dev48v.infy.uk/design/day19-date-picker.html
Part of DesignFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)