How to Localize Your Date Picker

Most localization efforts focus on language, but there's more to change than the text on a page. Some of the biggest localization challenges involve dynamic elements, such as date picking, payment processing, or shipping calculations, that must reflect the correct language, format and calculations — especially if there's no built-in support.

Let's take a look at how to localize date pickers with some common examples, along with how you can test localization to ensure an optimal user experience.

Localizing Date Pickers

Date pickers are an important part of many user workflows. For example, a travel booking engine may use a date picker to book a reservation or a calendar app may use a date picker to assign a due date. Ambiguous date pickers can lead to a frustrating user experience, inaccurate data submissions and a wide range of potential business problems.

There are two key factors to consider when localizing date pickers:

• Language - Date pickers should display month names in the proper language to avoid any confusion. Abbreviations in a foreign language can be especially confusing for users.
  
• Format - Date pickers should be formatted in the proper way to minimize the odds of any mistakes. For instance, U.S. dates are formatted as mm/dd/yyyy whereas many other countries use the format dd/mm/yyyy.

There are many different styles of date pickers, ranging from a calendar to a scroll wheel. If the browser doesn't support a date picker, it's equally important to provide a fallback that contains instructions on the proper format.

jQuery Date Picker

The jQuery DatePicker is one of the oldest and most popular date pickers still in use today. With its extensive API, the date picker makes it easy to adjust language and format by passing arguments to the formatDate method. In fact, you can customize just about any part of the date picker to include that language that you require.

Here's an example of configuring the date picker to use the French language:

$.datepicker.formatDate( "DD, MM, d, yy", new Date( 2007, 1 - 1, 26 ), {
dayNames: $.datepicker.regional[ "fr" ].dayNames,
monthNames: $.datepicker.regional[ "fr" ].monthNames
});

You can also define your own strings for each element if there is no built-in language support:

$.datepicker.regional["fr"] = {
clearText: "Effacer",
prevText: "<Prec",
nextText: "Suiv>"
}

These are just a handful of examples. The full API specification is available in the jQuery UI documentation.

Other Date Pickers

Date pickers have been a challenge for web developers for the past decade, but there's still no standardized way of handling them. While many websites still use jQuery UI's date picker, since it enjoys near-full cross-browser support, the W3C has been focused on building its own date input type with support from a growing number of browsers.

The HTML date picker enjoys limited support among browsers, but it's definitely the easiest option for localization. Since it's built into the HTML specification, browsers are responsible for handling the language and format considerations. Chrome, Opera, Firefox and Edge have custom interfaces for selecting dates.

In addition, there are countless other date picker scripts available with varying levels of support. Most of these date pickers do not support localization out-of-the-box, which means that developers may have to customize the picker to suit their target language or complete a more comprehensive overhaul to support multiple languages and date formats.

Testing Localization

Most development teams are familiar with unit tests, integration tests and even end-to-end tests, but localization tests usually fall by the wayside. Many QA teams find them difficult to implement from an automation standpoint, while manual testing can be very tedious and time-consuming using free proxy servers and other unreliable options.

WonderProxy solves these problems with a Selenium-compatible API designed to help test localization. With a Sauce Labs integration, developers can quickly create Selenium test scripts that are executed across a range of different locations to evaluate whether page elements are showing up with the correct language and format.

In addition, WonderProxy provides an easy-to-use browser extension for manual quality assurance for companies that don't have or want automated localization tests. The extension enables test engineers to quickly toggle between hundreds of different proxies in sections while testing websites based on GeoIP or browser location with optional arbitrary HTTP headers.

Explore WonderProxy's plans today!

Using Selenium

Selenium is the most common UI test automation tool used by developer quality assurance engineers.

jQuery UI's date picker and many other JavaScript solutions create an HTML table containing the calendar and other date picker elements. Using the HTML table, developers or test engineers can select table rows and look for the appropriate language settings within them, such as "Mo" in the table header for the ui-datepicker-calendar class.

The most important thing to remember when testing JavaScript date pickers with Selenium is that you need to wait for the JavaScript to load before running the test. While a timeout is the most straightforward way to do this, there are many other more robust options that don't introduce arbitrary load times into your test suite.

Best Practices to Keep in Mind

Date pickers are an essential UI component for many different web applications. In addition to localization, it's important to ensure that users understand how to use them and have a fallback option if their browser doesn't support them.

Here are some important best practices to keep in mind:

• Default State - The default state should guide the user toward the required input format in order to prevent input errors (although error handling should still exist).
  
• Validations - Validations should occur on the client-side rather than exclusively on the server-side and include helpful error messages to avoid any confusion.
  
• Highlights - Highlighting the range between two dates can help users avoid accidentally swapping their start and end dates.
  
• Fallbacks - Developers may want to create a fallback option in case JavaScript isn't enabled, so users can manually enter individual days, months, and years.
  
• Button - Consider using a button to display the date picker rather than relying on the user to click the date field — that way, the action is much clearer.

These best practices may change depending on each application and its users. It's worth spending some time thinking through date pickers, especially in applications where they make a significant impact, such as travel booking engines.

The Bottom Line

Localization is often an afterthought for both developers and test engineers. Unfortunately, the wrong language or format on elements like date pickers can be very confusing for users and create a wide range of business problems. The good news is that it's usually not too difficult to localize date pickers and test the localization to ensure that it's working properly.