r/badUIbattles May 16 '23

4-click-max birthday date picker OC (Source Code In Comments)


u/AutoModerator May 16 '23

Hi OP, do you have source code or a demo you'd like to share? If so, please post it in the comments (Github and similar services are permitted). Also, while I got you here, dont hesitate to come hang out with other devs on our New official discord https://discord.gg/gQNxHmd

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.


u/NinjasPounced May 16 '23

Source: https://jennica.github.io/datepicker/ . Did not fix all the leap year bugs.


u/56kul May 16 '23 edited May 16 '23

I don’t know how, but I failed to get to my birthdate.

I got the month and year right, but the day was far off.


u/evestraw May 16 '23

also had it first time. but that was because i didn tpay good attention to the dates.
Its a lot of info it ask at one time.

I don't think its a bad ui. it works in 4 clicks.


u/NinjasPounced May 16 '23

Feel free to DM any non-working dates but agree it is worth taking a few tries to grok.


u/56kul May 16 '23

I figured out what I did wrong.

I somehow mistook the values on the left for the age. I just now realized they refer to the days and I feel stupid. XD


u/MadMantisShrimp May 16 '23 edited Jun 29 '23

This comment was posted using Apollo before the Reddit API changes caused it to be shut down

Save third party apps

Fuck u/spez


u/Pale_Tea2673 May 16 '23

would be nice to have a back button


u/Holy_Juan May 16 '23

Idk why but i like it


u/Jpaylay42016 May 16 '23

Maybe its something with my laptop, but I can't click anything.

Edit: Had to turn off my adblockers


u/mlubben May 16 '23

If you make the table big enough you can even click your birthday in one click


u/NinjasPounced May 16 '23

I wanted to keep the number of choices in one screen less than 30 so it could technically have less choices than a traditional picker that lets you pick a day within a month.

To reduce to 3 clicks while still preserving the same general concept, you'd need 5 year columns, 4 day columns, and 3 month choices per box. So 60 boxes.


u/iliekcats- May 17 '23

Howd you figure it out?


u/unwantedaccount56 May 17 '23

There are 12 months. You can guess the month in 4 clicks if you have 2 options each time: 23 < 12 <= 24. If you have 3 options each time, you can do it in 3 clicks: 32 < 12 <= 33.

You do the same with possible days from 1-31: 5 clicks with 2 choices, 4 clicks with 3 choices, 3 clicks with 4 choices.

For the year it depends on the range as well.


u/PM_Ur_Illiac_Furrows May 17 '23

That's about 3 pixels per date, which is plenty if they're in order.


u/tomwie May 16 '23

This is actually a relativitely good idea. 4 clicks is far less than a usual date submenu needs.


u/ZENITHSEEKERiii May 16 '23

This might be a decent anti-bot captcha as well. It seems like it would be relatively complicated to program logic to bypass and also very easy to break any bypass code by renaming elements.


u/westwoo May 16 '23

At best it's as good as simply rendering any number into an image without even any obfuscation


u/Roxolan May 16 '23

Any quirky question will block bots as long as hacking your website isn't worth writing a custom bot for, and not otherwise.


u/ZENITHSEEKERiii May 16 '23

Yep, but at that point you can just employ actual captchas and maybe some randomly-generated logic questions designed to fool naïve AI.


u/unwantedaccount56 May 17 '23

But what about ChatGPT?


u/baccus83 May 16 '23 edited May 16 '23

It’s not really. It increases cognitive load considerably.


u/Cats7204 May 16 '23

Aren't most menus 4 clicks already? You click a year range, you select the specific year, then it takes you to select the month (only 12 options no need for a range), then the day (only 31 options no need for a range if you make the buttons small)


u/Boby_Dobbs May 16 '23

This is both genius and bad at the same time somehow


u/Varth919 May 16 '23

Genius in the simplicity.

Bad because it requires more thought and potentially time than sliders.


u/HoaiBao0906 May 16 '23

Not gonna lie, this is not bad.


u/Christoff_r May 16 '23

I can't pick February 29?


u/Darkened_Auras May 16 '23

OP said they didn't bother fixing the leap year bugs


u/vigilantcomicpenguin May 17 '23

Yeah, that's a user issue. It works for me.


u/Bartho_ May 16 '23

I am able to pick my date but for me it's some kind of Akinator kind of black magic fuckery even if it's all logical.


u/N3rdr4g3 May 16 '23

My guess (too lazy to look at the code) is that it functions as a 3 attribute binary (and trinary and quaternary) search tree.

An example for the months, it asks you to pick between the first 6 months and the second 6 months, then each choice reduces the number of possible months by half. (Possible months after each click are: 6, 3, 2, 1).

The same principle applies to the years and to the days. There's more than 16 so they need more than 2 options for 4 clicks (24 is 16, 34 is 81 for the days, and 44 is 256 for the years)


u/Schuben May 16 '23

Yeah, it's 3D as evidenced in the fact that they have to include 2 buttons in each box in the grid that would otherwise represent a 3rd dimension which can't easily be depicted in a typical web page.

Maybe I should make some sort of manipulatable hypercube date picker...


u/integralWorker May 16 '23

When your UI is so bad it overflows into goodness


u/cph101_dev May 16 '23

It might only be 4 clicks, but god, that is a hellish UI


u/Ssernikk May 16 '23

I can make 1-click-max date picker with radio buttons


u/er3z7 May 17 '23

I unironically want this to be real


u/Item-Tricky May 16 '23

I hate it, but i love it


u/UnicornBelieber May 16 '23

If you make it 3D, you might even trim it down to like, 3 or maybe even 2 clicks.


u/-True_- May 17 '23

I love it


u/Leothegamedev May 16 '23

This idea is not sufficient for Jesus's age.


u/NinjasPounced May 16 '23

I know this is a joke, but going back that far would require extending the layout to 7 year columns without increasing the number of clicks.


u/Leothegamedev May 17 '23

Shout out to you for doing the math. This is a pretty cool concept tho, beating the drop-down selector (2+2+2+1(submit)) by 3 clicks. Try implementing it somewhere.


u/epletcher72 May 17 '23



u/lemon-elv May 17 '23

i love this


u/bpleshek May 18 '23

Didn't work on Chrome for me. But it did in Edge.


u/cetsolini May 18 '23

imo, this is much better than the all birth date inputs i have ever seen...


u/rinyre May 19 '23

Two fewer clicks, exponentially-higher cognitive load. Well done.


u/DRayX17 May 20 '23

This is so good. For some reason, I sort of like this XD


u/Demiurge11 May 31 '23

Binary search FTW!