The first two weeks of Ams Date Picker
June 05, 2022

Just two week ago, I started a new open source project – Ams Date Picker. The first branch of it will be on React and will provide a component of full headless version.

In short, Ams Date Picker can be used as a beautiful out-of-box date picker component for all your needs, and can also be used as a headless date picker engine that works totally inside your original design system.

I can show you a very quick design prototype of Ams Date Picker (headful) to help you understand its world view:

Feels great? I am not going to show you all right now but I will definitely introduce all design prototypes through the article.

Why I am making a new date picker?

For year, the date picker has not been evolved. It is safe to say that the existing date picker mechanism is already a great option, but I cannot say that it should not be better anymore. From 2020 to 2022, the most impressive skill I have learned was efficiency. It helped me save a lot of time on doing redundant and annoying tasks. Shortcuts have been introduced to many modern applications like new calendars, new todo apps, all new note-taking apps, etc. But none of the date selection behavior has been changed, even when we just want to tell the system a date — we need to know a year, a month, a day, an hour, a minute, a second, and an AM/PM as optional.

For example, if you want to select a date time of 10 minutes ago, you have to know what hour now is, what minute now is, and even what second now is. If it is a legacy date picker, you may also need to type in year, month, and day manually. In my opinion, the most intuitive way to select the date time of 10 minutes ago is simply telling the system to help you compute the result by typing "10 minutes ago", or in a shortcut way like -10m. In a modern society, the biggest difference between a smart solution and a human-force solution is who will be responsible for the computation. And I believe that, in 2022, date picker should be much simpler with a smart solution.

How do people use it?

You want to select yesterday 9:00 PM? Simply type yesterday 9pm or -1d 9pm. How about 3 weeks ago at 21:00? A much more painful computation, right? Just type -3w 9pm (or -3w 21:00, whatever you like) in Ams Date Picker, hit Enter, and you are all set. You don't need to do math anymore, and you don't need to worry about any potential computation error anymore.

Another break-through design of these magical modifiers are using them to set the time interval – users may want to select a start and end time, and the end time will be just 10 minutes after the start time. With Ams Date Picker, users do not need to type the same thing again. Instead, after some configuration at the development side, users can simply use +10m modifier to set the time interval intuitively and conveniently.

Clearly, this is a brand new idea to select the date, and not everyone knows it from day one. I understand that. So, Ams Date Picker must be building for users who do not know how to magically select the date like I mentioned above. We, therefore, build a modern GUI date selector for users to select the date intuitively.

The definition of Ams Date Selector is different from the definition of Ams Date Picker. The prior means a dedicated GUI selector and the latter means an input field which has the ability to read the date.

I have tried most of the main stream date picker out there before designing the first prototype of Ams Date Selector. The most needed feature for me after trying all those selectors is the input ability. Yes. A GUI date selector will be heavily supercharged after having the ability to type.

When you want to select the year 1970, which is the most convenient and intuitive way to you: scroll to 1970, or type 1970 directly? I believe the latter option will be better in efficient, and the prior option will be better for users who are not really familiar with using keyboard. Ams Date Selector keeps both these two options. Users are able to type their selection to all fields of Ams Date Selector if they need to, including years, month, day, hour, minute, and second.

We help user understand everything

Users who do not know Ams Date Picker at all can easily handle their date-selection task in an intuitive way, but how about users who want to learn the powerful side of Ams Date Picker? We have magical modifiers, input supercharge, GMT input support, ISO 8601 support, and even more. Nobody can know all these powerful features from day one using Ams Date Picker – they need a manual. So, Ams Date Picker provides a robust and detailed documentation (user manual) out-of-box for all users.

In this documentation, all features like basic interaction, magical modifiers, input supercharge, combination of different features, and troubleshooting are included and are formatted well. Developers can put the help button wherever they like (usually next to the input field label), so users can check it whenever they like.

In future, we will also add search and TOC to make this user manual much more useful. After interviewing with three closed-test users, they feel great with this manual and think it is helpful to them especially in magical modifiers.

Headless from day one

Making a beautiful headful date picker component is our main goal, but we will never limit the power into a pre-built styling (headful) component. Our headless component will be fully styleless and only has a native input component in it.

Not just that – we are using Stitches as our CSS base, so any styling override will be as powerful as it is. We want developers to have the full control over the styling and have no pain on overriding the CSS – this is still what we are pursuing right now.

Daylight Savings Conflict Resolver (DSCR)

In a project of building a logging system, I found the needs of resolving daylight savings conflict. This is not a usual case in my life, but it does happen in some popular countries like United States. If you do not know what the daylight saving time is, you can check the Wikipedia.

In short, when clock turns (basically it is turning the timezone offset), there will be a short time frame of 1 hour being duplicated. For example, on November 7th, 2021, there were duplicated time from 1:00 AM to 1:59 AM because the clock turned back to 1:00 AM when the first 1:59 AM was reached.

Then the problem is: if users are selecting the date and time in local timezone, how can they select the first 1:00 AM or the second 1:00 AM per their needs? When users want to select the time range from the first 1:00 AM to the second 1:00 AM (actually a duration of 1 hour), how should it be achieved?

Well, we are giving a truth-proven solution that works perfectly and intuitively. This little Daylight Savings Conflict Resolver box (DSCR) will only appear when the selected date is under the conflict of daylight saving time (e.g. November 7, 2021, at 1:00 AM).

It is not ending there. With the help of magical modifier intervals, users can intuitively set the time range they want. But try to think of a selection: from the first 1:00 AM to the second 1:00 AM in a day having DST conflict. By using Ams DSCR Module, users can clearly see what specific two 1:00 AM are associating with. I will introduce this feature in detail in a future blog. Stay tuned.

Alright! That is nearly everything we have done in the first two weeks. Development is going well and I cannot wait to show you the progress in my next update. See you soon!