building a date pickerminimalistic crafting with vanilla js

Cooking up a new library and releasing it into the wild is always exciting. And today I get to experience a bit of that excitement again. Please welcome easy-dates-picker to the world; an ultra-lightweight date picker, written in vanilla JS, with zero dependencies.

Why I Built This

Every great project begins with a need. In my case, the quest for an ultra-lightweight date picker led me to explore numerous existing solutions (we'll take a look at some of the most promising below). However, many were burdened with heavy dependencies, a large bundle size, lacked accessibility, or were cumbersome to customize. I decided to take matters into my own hands and develop an open source solution of what I was looking for: easy-dates-picker.

During development, I adhered to a few key principals that acted as a North Star:

• Zero dependencies
• Minimal footprint
• Multilingual support
• Light and dark modes
• Enhanced accessibility

Let’s explore these principles in detail and understand why they were essential for easy-dates-picker.

Zero Dependencies

In the realm of date pickers, the issue isn't the lack of options but rather their tendency to be over-engineered, accompanied by a lengthy list of dependencies baggage. My aim was to simplify.

As a result, easy-datse-picker stands out as one of the smallest date picker libraries I've come across. At just 7.07kb minzipped, it's a fraction of the size of other popular date pickers, and ensures ease of integration without worrying about bloated bundle sizes or conflict with other packages.

This approach isn't without tradeoffs. easy-dates-picker returns a Date object, requiring you to format the date yourself, if needed. To assist with this, I've also created easy-dates, a tiny (2.3kb minzipped!) companion library for hassle-free date formatting.

Tiny footprint

easy-dates-picker was designed to be a nimble yet powerful tool, ensuring it adds all the value without the weight.

But why does size matter so much? In a world where web performance is key, every kilobyte can impact loading times and user experience. It sounds extreme, but slow loading times can be detrimental to user engagement.

When a website or application takes too long to load, users often become frustrated and may even abandon the site altogether. This not only affects the immediate user experience but can also have longer-term consequences, like fewer return visits and negative perceptions of the site or brand.

Keep in mind, it isn't just the date picker that has to load. Most websites have dozens of other packages and files they'll need to load before the page is ready. And it goes beyond initial user satisfaction too. Search engines like Google use page speed as a ranking factor, so a slow-loading site can negatively impact your SEO and search position, resulting in fewer organic visits to your site.

If you have a date picker in your site or app, there's a good chance it provides an important functionality. But it's also likely that the date picker represents a very small portion of the surface area touched by the user during their journey. The amount of bytes that you force each user to download should reflect that.

Now, don't get me wrong, this isn't a brand new idea. There are already some lightweight and popular date picker solutions as is, so I wanted to ensure that easy-dates-picker was among the lightest of the bunch; and at ~7kb minzipped, it is.

Although pikaday has i18n support and is a little bit smaller, easy-dates-picker includes translations for 32 languages right in the bundle, so you don't need to worry about your own translations or additional files for each locale.

Support for other languages

Inclusion matters, and developers shouldn't need to recreate all their code each time the locale changes. With this in mind, I included translations for all text and labels (including aria labels) for 32 languages. Capability is great, but as a developer, I've always tried to automate as much as possible.

When enabled, the easy-dates-picker will check the language of the HTML element it's attached to, and automatically display the date picker in the same language. If the language isn't supported, it will default to English (or any other supported fallback language). This is particularly advantageous when localizing a website into different versions. Instead of having to manually set the language for each date picker, you can just set the language on the HTML element (which you should be doing anyways), and the date picker will automatically display in the correct language.

Light and dark modes

There's no better feeling than when something just works; especially when you're working on a deadline. Although you can override any style you like, easy-dates-picker comes with a built-in dark mode, so you can easily switch between light and dark mode with minimal changes to your code.

Dark mode is more than a stylistic choice; it's about providing an accessible, comfortable experience, especially during extended use or in low-light environments. And while light mode remains the popular default (and is essential to support), dark mode has gained substantial popularity for its easy-on-the-eyes feel and potential battery savings.

Accessibility

Inclusivity is at the heart of easy-dates-picker. Developing a tool that is accessible to everyone, regardless of their ability, was a priority. This package supports screen readers, which is a must for blind or visually impaired users to be able to comfortably interact with the date picker. Keyboard navigation has been fine-tuned as well, allowing users who cannot use a mouse to easily select dates.

Color contrasts and interactive elements are designed to be compliant with WCAG (Web Content Accessibility Guidelines). This ensures that users that find colors challenging to interpret can still use the date picker without any hindrance. Where applicable, interactive elements have been labeled with ARIA (Accessible Rich Internet Applications) tags to enhance the experience of users relying on assistive technologies.

By integrating these accessibility features, easy-dates-picker not only adheres to best practices but also provides a seamless experience to a broader audience, reinforcing the belief that good design is inclusive design.

What I learned

Embarking on a vanilla JavaScript project like easy-dates-picker reminded me just how much I appreciate frameworks like React. It's projects like these that bring you back to the basics, reinforcing foundational skills and concepts.

Back to basics

At its core, a calendar is a matrix of days - essentially arrays and loops. While these are straightforward concepts, the logic can easily become complex. Throughout the development process, I strived to maintain clarity in my code. This meant ensuring that the code was straightforward, well-organized, and used clearly named variables and functions. Balancing readability with efficiency was key.

Dive into localization

But the project wasn't just about navigating arrays, loops, and Date objects. A significant learning curve came with the aspect of localization. Ensuring that easy-dates-picker was language-inclusive meant adding support for 32 languages, covering a wide range including English, Spanish, French, and many more.

This endeavor introduced me to the intricacies of working with various character sets and date formats. I discovered how different cultures format dates in diverse ways - a fascinating glimpse into the nuances of localization.

For instance, while the English format is "Month Day, Year", Spanish formats dates as "Day Month Year". Moreover, I found it intriguing that Traditional Chinese and Simplified Chinese, as well as Portuguese and Brazilian Portuguese, share the same days of the week and months of the year.

Comparisons and future optimizations

Comparing easy-dates-picker with other libraries, such as pikaday, which is slightly smaller but offers similar features like included CSS and localization, has been enlightening. It's a reminder that there's always room for improvement and optimization.

This is where the open source community comes into play. With their help, I'm confident that easy-dates-picker can become even more efficient and streamlined.

What's next

As with any useful open source project, the journey with easy-dates-picker is far from over. I'll continue making improvements where I have time, and welcome any contributions from the community.