Smart Date Module Puts a Premium on Time, User Experience

Time is always of the essence. From a consumer perspective, you want to know when events take place, when something’s open or closed, how long a meeting or activity will last. And, from a development perspective, you want to be able to create a date field that’s intuitive for the users, but doesn’t involve a lot of custom work.

There’s a default functionality in Drupal 8 that, while functional, is cumbersome. So I recently developed a module called Smart Date that will make things a lot easier for site developers -- and provide that functionality that editors want.

I initially identified the need back when I was working on a client site that required me to enter some sample content. We’ve all used calendar software -- whether it’s a Google or Outlook calendar, or even what you have on your phone.

In this instance, with Drupal, I needed to enter the year, month, and date. I also had to enter a start hour, start minute, and define whether it was AM or PM. And then do it all over again for the end time, meaning 12 fields to fill out for each instance. As a user, we have an expectation and assumption that entries would autopopulate end times -- but you know what they say about assumptions.

I wanted Drupal to have that same ease of use. To achieve that, I made a date widget that adds a concept of duration. Like your calendar application, it can assume a default duration, so as soon as you enter the start, it can populate the end for you.

As a site builder you can choose this default duration, so if you want it to be one hour (like Google and Apple’s calendars) if can do that out of the box. If you’re building a recruiting site that should default to 15-minute intervals, that’s up to you.

You can even restrict what intervals are available. In the default setup, editor has the convenience of choosing from a default duration or making a custom range if they need something that isn’t listed. But suppose you’re organizing a conference where the sessions will all be 45 or 90 minutes in length. As a site builder, Smart Date allows you to enforce these constraints.

Another request we’ve had from clients is the ability to designate events as “all day”. Again, something we’ve all become used to in our calendar applications. And a perfectly valid use case in how we need to register events on the sites we build. But up until now, we’ve had to custom build a solution as a customization, again and again. Smart Date gives your editors this ease-of-use with the click of a button – again unless the needs of your solution dictate that as a site builder, you need to take that option away (which you can).

Another request we get again and again – and have had to build custom – is to make the display of time and date ranges more intelligent. For example, if you were formatting a date range by hand, if the start and the end were on the same date, you wouldn’t write the date on both, you’d only write it once. Smart Date has this kind of intelligence built in. It’s a little more complex to set up, but hopefully, the presets will work for a wide range of use cases, and in time we’d like to see translations available on localize.drupal.org so a wide variety of cultures can get their preferred date and time formats available on install.

One last major aspect of Smart Date is performance. At Digital Echidna, we know that the speed of a site is a critical component of the overall experience, not to mention SEO. We test our sites at various points during development to ensure they’ll meet the appetite by web visitors for a site that not only looks great and is easy to use, but loads quickly so they get done what they need, and go back to surfing for funny cat videos.

In a recent mid-development site performance audit, I realized that the slowest page identified was an events archive, even though it held almost no content. When I looked at the query Drupal had constructed based on the view configuration, I realized the core date fields were storing values as strings, and at query, every row had to convert multiple values into date formats in order to make the required comparisons. I’ve since spoken to a number of other developers within the Drupal community, who have had to build workarounds so that date and time stored in Drupal can be accessed in a way that meets web visitors’ ever-increasing expectations for fast page loads.

MySQL has its own DATETIME field especially to provide fast queries for storing and accessing this type of data, but the Drupal core team chose not to use it but a solution that depends on this wouldn’t be portable to other database engines, which is understandable. For Smart Date, I chose to store the values as timestamps, which have some limitations in their ability to store values in the far future or distant past, but more than meet the need for what we see as a typical use case, storing coming or recent events.

The beauty of this approach is that we could use functionality built into Drupal 8 for date and time functionality (handling of date and time widgets, with validation, etc) and its built-in capabilities for storing and retrieving timestamps (which are still used for node creation and revision dates, for example) and only write the code that is necessary to translate between the two.

It’s a testament to the object-oriented infrastructure of Drupal 8 that we could build this solution using different parts of what’s already in Drupal 8 core, and focus our efforts on adding code where it really adds value.

The module has already started to get feature requests, so I expect we’ll see its capabilities continue to grow, as other developers submit patches to “scratch their own itch”. That pooling of community effort is another key strength for Drupal, as we can all benefit from the work we do individually to make things better.

We hope that Smart Date will make Drupal sites better solutions: for site builders, for the editors that use them, and for the visitors who come to consume the content. All by making it easy for Drupal to work like the calendar application we’ve all become accustomed to using, from technology giants like Google, Apple, and Microsoft.

At Digital Echidna, we’re committed to improving that experience across the board with our products, so that when someone who is not as familiar with Drupal is entering content, it’s going to be a positive, intuitive, and enjoyable experience. When we discover a new, better, or more intuitive way to do things, we add that to our baseline development toolbox to ensure that all of our customers can benefit from that improved experience.

We often take for granted how much back-end work goes into creating what appears to be a simple bit of online functionality. But these things take time -- and with Smart Date, I’m hoping that this module will provide a better experience that lets people spend less time developing and frees up more time to focus on creating innovative, customer-focused solutions.