Date Picker Details
April 11, 2022
I was building a date picker last night, and I decided to structure it as three select boxes:

Iām sure thereās nicer date pickers, but this was quick and easy.
But then, I wanted to add more information to the day picker: an asterisk to indicate the current day, and the name of the weekday to make it easier to get perspective.

But now, when a date was selected, it looked a little ugly:

It just doesnāt really read like English āĀ āApril 11th Monday 2022ā.
I realized that I wanted the possible options to have extra information (the asterisk and weekday name), but once a date was selected it only needed to show the number.
Thatās not really possible with HTML and the built-in browser <select>
though. So it required a bit of a hack.
First, I added a piece of text that reflects the chosen dayās number. In the demo below, the text on top is what I would want to show when the select box is closed, and on the bottom is the actual select box.

My first idea was that Iād make the select box hidden entirely, but trigger it to open when the user clicked on the number text. But it turns out that you canāt trigger a select box to open with code āĀ it only opens when someone clicks on it.
So my solution was to overlay the text on top of the select box, and make the text above unclickable (with CSS, pointer-events: none
). So when someone clicks on the text with just the number, theyāre actually clicking through the text and onto the select box below.

Then I made the select box underneath transparent, and set its width to be the approximate width of a two-digit day number above it.

So now I can have the best of both worlds! The extra information is visible when selecting a date, but not when the select box is closed.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects Iām working on.