3 ms·
Coincidentally I built one yesterday at well. Opposite approach. As little code as possible. First of all Input type=date On Android shows a date picker
by kristopolous 5y ago
Coincidentally I built one yesterday at well. Opposite approach. As little code as possible.
First of all
Input type=date
On Android shows a date picker that many users have found confusing to operate. They can't figure out how to select the year. I used to say "not my problem" but it actually was because they still complained.
So
Input type=month
Solves that first problem and then a day selector does the rest but that's an unfamiliar paradigm so...
I wanted year/month/day in a way that uses will find easy. One for each then.
There's many existing options and they use a lot of code. I mean just an insane amount. I don't want a boatload of code to select a date in a way that users won't complain.
The browser already knows everything about dates, so we can just ask it how many days are in a month and what the name of the month is.
Leap years, leap seconds, it's all in there. No wheel reinventing necessary
So we have one of our two key lines
let maxday = new Date(year, month, 0).getDate();
(It'll be further explained at the end.)
2nd part; let's not have an array of month names. Instead, let's ask the browser for what the user calls the months based on their first language:
Intl.DateTimeFormat(
navigator.languages[0],
{month: 'long'})
.format( new Date(startyear, i) )
So they select the year, then the month, then we use that as a query to find out how many days are in the month by asking the default Date object, already built in.
And all together now
https://gist.github.com/kristopolous/d956c148ddcb628d54ec5118a139b9dc https://gist.github.com/kristopolous/d956c148ddcb628d54ec511...
Btw, this is for a product related to driving a car so we aren't dealing with blind users. A lot of accessibility things were skipped