Date pickers suck, we fixed them

Date pickers suck. We all hate date pickers. And as we were talking about them, we realized that, well, with the three of us, maybe we could actually make a good one. So, we challenged each other to see who could make the best new date picker. So, we put each of our date pickers to the test with real users where they rated them on each of one, design, two, ease of use, three, how magic it is to use. We even tracked how fast they were to get the end result. Abbreviations, relative dates, ranges, and holiday names are okay. Tab to autocomplete. Oh, okay. So, Easter next year. Oh, guys, who wants to go first? All right, I can go first. I think mine's the best. So, I focused on speed of input and natural language input because quite honestly, the best date picker is no date picker at all. So, what you can do with mine is obviously you could just click and go what you want. There's a So, you said the best date picker is no date picker at all and then you made a massive date picker. It's pretty big. It it is big and it's it's responsive. It can it can be as big or as small as you want. However, listen listen to me here. Of course, you can click on the range that you want and of course you have these little arrows where you can select the different days that you have. There's nice little micro interactions and animations, but quite honestly, the best date picker is no date picker at all. Sometimes I just want to type in natural language, right? I just want to say the next 2 weeks. Boom. And it will automatically select it. However, even more killer is that it will be constantly scanning the page for possible detected ranges or events or holidays, and you it will automatically select them. Look at the little twinkle star on there. Why is it there, dude? I mean, cuz it's intelligent, dude. It's reading my mind. Can it read what's on the page? Absolutely beautiful. It handles holidays, handles absolutely everything you want. Ranges, single days. The best date picker I've ever seen. Al in the real world, that's awesome because you can think about the context, right? Like, let's say you're editing a document or you're emailing somebody. There are dates in there. So, it would make sense that it would pull from the page. But in this challenge, that's going to make it like super easy for our our user testers. It's going to be easy for the testers. Of course, it's going to be easy. It's not cheating at all. When I first saw that, I thought this is cheating. That's what I thought. Show Randy, please put the screenshot of the Slack on there where she says, "Can we use different libraries?" I says, "There is no rules. There's nothing illegal." Yeah. And no, it's fine. I just wish I would have thought of it. That's all. Yes, it's it's a it's a great idea. That's That's definitely has to be a bug cuz I'm clicking on March and it messed up this whole thing. Oh no, I don't like this. Great job, Wes. Thank you. I can go. Uh, I think mine's the best. I think mine is the best because it is fast, it's small, and it only uses natural language. One thing I've really like wrestled with was the idea of using two inputs for ranges when I realized that uh you could only like you could represent anything with like if we were saying March 14th, you could represent it with a hyphen, you could reference it with a two, you could reference it with an until. And any way that people are going to try to express that, it's always going to work. And another thing I decided to have here was this kind of ghost completion text that shows you what the end result is. So, a hard thing for me was trying to figure out how to have the actual range represented here, including like how long it is, 6 days, without that getting in the way of the interface. Another thing I added that I think is really neat is uh cursor style tab completion. So, if I start typing March, I can hit tab 14. So, there's a number of little quality of life things I did in this that I don't know if any of you guys thought of. For instance, if you spell February incorrectly, it still gets it. So, I have a ton of common misspellings of holiday words shortening. So, like Christmas can be XM like M14 works, M14 works, March 14 works, uh March 14th works. So, it it really does anything that you could possibly want. Okay. New Year's Day 2027. Uh, Jan 1, 2027. Is this like as smart? Oh, wo. Okay. I kind of like this. Personally, when I write my date down on things like at the doctor's office or signing things, I feel like I do it differently every single time. Whether that is write it out in English cuz I'm just like I'm day day, month, month, year, year, what I I don't know. ever remember what it is. So, I was just thinking like what could I possibly do to make this like handle any possible way that somebody would write this down. It does math, too. Like today plus 9 uh today plus 9 days today uh next week gives you the whole week range, that type of thing. It can really handle so many things. Imagine, Wes, you could come into it and just say, "Oh, I want the last 30. I want the last 60. And mine does that, too. I want the last 100. 1,000. You got it. Mine does that. Every everyone's does that. That's table. You can type last 100 in yours. Yeah. All right, CJ. All right, I'll go. And I do think mine is the best because it's all about natural language. Um, and it's typo uh tolerant. It supports holidays. It supports ranges. So, I built my own little challenge site here. So, for example, 3 weeks from today could be 3 weeks from today. Nice. Um, and it grabs it. And I kind of struggled with how do I tell the user what they're selecting. So, I have like a suggestions list here. And, uh, if you select it, then it pops up a calendar. And so, that will then allow them, you know, if they if they want to select a range or something like that, they can do that. But, yeah. What's radio? Yeah. Listen, I will I'm not going to win the design award, but I do think that my text uh detection and prediction is like really good. I I also have ghost text, so uh you can tab to complete um and also supports to like like holiday to holiday or like ranges to ranges. Yeah. And so that's the other thing is so uh let's say uh Independence Day 2025 to Independence Day 2027. Um and then we select it. Independence Day. It's that July 4th in the US. But if you have a range across multiple months or multiple years, it does pop up as the sideby-side calendar. And the border race border radiuses look a little bit better there. I didn't focus too much on design. This was all about like the parsing engine, natural language text. And I kind of struggled with like how do you tell users how to use this thing? Cuz yes, that's a big it's just input text. And like literally what you can do is like if you're on the the study site, you can literally just copy paste whatever the text is and uh it's it supports that. No one told me I couldn't do this. Yeah. Wa. You see that? That was a little funky. I tried to make it super forgiving. I will say I had a few people try mine. Uh my wife loved mine because she she mentioned it's like I love mine too. to my wife. My wife, but she mentioned she's so used to uh like talking to an AI that like at this point this is the kind of interface that people expect. But then I had her friend try it who was non-technical and she didn't at at first she didn't know what to do. And that's actually why I'm hiding the date picker until you select something because before Oh yeah. I was showing the date picker and like she would type something in and then click the date picker which would remove the suggestions. And so I was like oh like that's going to confuse people. So now the date picker doesn't pop up until something is actually selected. This is like this feels like too easy. I'm just like copy paste. Well, I'll also say this, like I really built mine as like a a component library that can be customized. So we've got light mode, we've got dark mode, and then everything is a CSS token that can be um uh popped in. So this is like an Airbnb style thing. So like from yesterday till tomorrow. Again, please ignore my my boy. Oh, yeah. Uh, but the style, all of the there's tons of CSS variables that can be overridden to customize it to your site style or whatever else. All right, guys. So, now is the moment of truth. We put this in front of five people. We got their end results and I'm going to reveal each category. So, for this leaderboard, we have three colors. Blue, which is hot date, my date picker. We have green, the date range picker, which is Wes's date picker. And then we have orange, the magic date picker, which is CJ's. I think mine wins just based on the name alone. The name Mine's Magic. No, Magic sucks. Scott's name is so good. I I literally messaged him like, "Damn it, that's a good name." I thought I I thought I thought of that name, too, but I didn't I didn't use it. I'll say that. You should have. I have no proof. I have no proof, but I did. Yeah. The first one we have here is the overall design. The winner of the overall design was the date range picker from OS with an average gradient on anything. If people eat that up 4.4 uh CJ, you did mention that you thought you would lose the design and sadly you did. Yes. Yeah. I think again like these are nontechnical users. They're not designers. They're going to go with what looks interesting and Wes has definitely looked the most interesting. So I I agree with this. Next up we have is ease of use. The winner of the ease of use with a shocking 4.8 is the hot date date picker. 4. I don't Yeah, this this baffles me cuz I don't understand how you beat me. I think mine is easier. It's similar idea but easier to use cuz it gives suggestions. I don't know. I think there were some times CJ like in your demo when you showed yours how when you select the date and needed to change it, it kind of like goofed it a little bit one or two times. I think that that might have been might have been the kicker or also having to select it at all, you know, having to bring the drop down and make somebody select it. I don't know, Wes. Uh, ease of use. I will say in the study, stupid. Yours, yours did have issues where when somebody would select the start to the end and then they needed to change one of them, it would then select the start one again and then they were clicking here and then clicking here and then clicking here. Oh, they just don't know how to use it. Yes. Stupid users. Last up, we have magical or joy. I hate how you blurred this so poorly. Oh, come on. The winner of this one is also the hot day picker with a 4.2. CJ CJ, yours is a 4.0. Again, very, very similar, very high scores. Wes, one thing I I will note about yours in the studies, Wes, is that people did not see the AI buttons. really? Oh, people saw the AI buttons, but only like halfway through. Like maybe they didn't. Did anybody click them? Cuz the whole point was they just click the button. Maybe I should have hid everything else. All right. Next one. Overall speed. And this is with the speed outliers. Shorter is better. What? Hot date. Nearly half of less. And this is with outliers. And I'm going to see the tapes. I got to see the replays. This is not This ain't it. CJ, yours rocked when people realized they could copy and paste, but when they didn't, yours was slower than mine because the tab auto completion or whatever, people were just not having to go and click, right? Did these go in order? Were was mine always first? The order was randomized. And I will say that that order did actually influence the score. Sometimes if somebody came across yours, Scott, before mine, then when they use mine, they probably are already used to it. Or similar idea. They use mine, they fumble through it, and then when they use yours, they're already used to just Yeah. So, totally. So, at the end result, the composite score. I will say this is totally rigged. And I won. I didn't lose with a massive score of 13. It was close, guys. They were all very wellreceived. It was close. So I started off with a web component called Cali uh which is really really nice but there was a bit of limitations around like custom headers. So I ended up scrapping that and I was in like the depths of web components and then I finally switched to using lit way better. Like I was just doing it vanilla no reactivity at all just updating values in the DOM and it was it was I was just chasing my tail. Um so how big is this bad boy Wes? We see how big it is on the screen. Uh, what are we shipping here on this package? A chunk for five megabytes. Wow. Well, let's say two and two two megabytes cuz it's they're only going to load one of those. You're not going to load the map. Yeah. Two and like why is it two and a/4 megs? I was just like when CJ told me that I was like there's no chance. Like I bundled lit in there just so that it would be um like usable for on Scott's thing without having to like load in different versions of LIT. Yeah, but that's not 2 megs. And I like was looking into I was like, what the hell is 2 meg? And it turns out is it the holiday library or what is it? I it was I extended the um chronojs which does the like detection and it doesn't handle holidays. So I loaded in like literally every single holiday in the world of all time is being shipped in here which I shouldn't have done. Um, and I didn't realize I was doing that. I thought I was just bringing in several common holidays that were like like Easter, but it's literally every holiday that I could ever imagine. Oh my god. So, be careful, folks. I I feel like the the only big issue I have with it is I think the sheer complexity of the interface. Uh, there's so there's a from, a to, a type range, an auto selector, a date picker. Like I mean this is this is a beefy input. I mean sometimes yeah it is a Swiss Army. Yes. I did have a feature that was like date ambiguity. If it wasn't quite sure it would pop up with a couple of buttons below and I ended up pulling that before we we cuz I just found it was confusing like buttons popping in and out. Another thing I struggled with was how do you teach people how to use this? So, um, I wrestled over the placeholder text, which ended up just being type anything, even though that feels like instructions should be somewhere else. I do think that that ended up being the right call and then having these examples down here. Um, you know, that way people could really see that you could just type anything even 9 days after Christmas until New Year's, you know, like getting really crazy. Let's see that. Put that in. Okay. 9 days and I'll do it after. I'll How about this? Nine days after Xmus until Easter. Boom. Scott discovered nine days after That's And you didn't use a library to to parse all those out. Nope. It's all just brute forced really. Uh I think that's really cool and I'm very impressed. But don't you just need to see a calendar sometime? Like if you're just like simply looking at it and saying, "Okay, yeah, like if I'm trying to book like a Airbnb or a flight or something like that, I just want to see where the weekends are and be like, "Okay, I'm I'm going on Friday and I'm going to come back the following Wednesday." You know, like I just think about that. You just thought about you just said that you would say I'm leaving the uh first Friday but of March until April, but you don't know that until you look at a calendar, right? In your case, you would have to go to another calendar and figure out what those dates are. I would agree. I need to visually see it because I want to know like, okay, what are the holidays? Is it a weekend? Is it a Thursday? You could get used to this, Scott. I think if people start thinking this way. Yes. But I think that's your major hurdle is you're like most users are used to seeing a calendar. So that's probably the way they would want to interact. Now we've got an actual visible calendar which I love because I'm a visual person. I think hot date is a pretty hot date picker. Honestly, I think this is this needs to be added to existing calendar components. Yeah. So not only do I have typo detection, but it's also certy keyboard aware. So like sometimes when you're typing certain letters are next to other letters on the on the CI keyboard. How did you do that? Uh it's a whole algorithm. Um so there first there's Levvenstein distance which is like how far one word is from our dictionary of words. Um but then there's also uh an entire layout of all the keys on the keyboard and how close they are to each other. So it goes through both. It does Levenstein distance and then it also does like how far is this word from a typoed version of the word. CJ, it's crazy how similar ours are ended up. I also did the Levven scene uh on on mine. Yes. Very interesting that we prompted the same algorithm. Unbelievable. This is what I'm thinking is like did AI make us arrive there? But I I don't think so cuz like this is what we want. Like we we want to be able for everything. Yes. Like this is how I want it to work and function. My problem statement was like I like date pickers are clunky. Like they take too long. I just want like I think natural text is the the interface that most people are used to these days. Okay. Can can you show me your your editing workflow? So, let's do February 18, 1988. Mhm. Until tomorrow. February 18th, 1988 until tomorrow. Okay. Now, now change that to February 2020. I would do it in the text box. Okay. And then that's really it. So like if you want to like add a day or remove a day, then you're going and and editing the text, right? Yes. And I do get some arrows in there. Yeah, you could get like I I do agree. I think if we combine some ideas like maybe if I hold shift and click here. Oh, that that actually works. Never mind. Yeah. So if you hold shift, but it doesn't work. It doesn't work backwards. That's why that's why I didn't say it doesn't work. You can't go backwards. You can only go forwards. I spent a lot of time on mine where it's like what happens when you select two things but then you you want to select more forwards or back and you want to add or remove. Oh well, if you just have natural language in a a giant calendar then it's really it's not dead. Scott, well I'll tell you you need the mix of natural language and UI. Wes, can I add something anecdotally? When I was watching Bailey complete this this uh challenge, she pulled out a calendar when she was using Scots and CJs because she needed a calendar for reference. I told you to your point, she pulled out her her eye while she was completing it. That was two weeks ago. There's my calendar. You know what's interesting is that when I talked to Courtney afterwards, she was shocked to know that none of them used AI in the way she was thinking are just AI to LLM, right? like the natural language input obviously is what what won it, right? And mine had that. Plus, it had a calendar. So, I think I could have won it if I really just did that and had the AI detections, right? Like I it probably would have been a second for everyone if people if I just said, "Here's a button. Click it. Boom. Next." So, in addition to building this sick site, we also use the Century Metrics platform to capture spans of all kinds of information from input round ratings all the way to clicks, time, and all kinds of stuff. So, if you want to have detailed metrics in your application, head on over to century.io/sax. Sign up and get two months for free because this thing absolutely rips. All right, who did the best job down in the comments? CJ stands, please do not apply and let us know what we should be building uh in the next one. Peace.