198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
Latest 7 Posts
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 2
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 2
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 3
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 3
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 5
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 3
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 0
Top 10
Dojo in XPages – 9: Manipulating DOM Element Styles and Classes
Tue, Mar 4th 2014 9
Dojo in XPages 11 – Using Loading Images to Improve Perceived Responsiveness
Mon, Mar 10th 2014 9
Dojo in XPages – 22: Displaying an Image Gallery of Attachments
Thu, May 8th 2014 9
Dojo in XPages – 23: Using a Lightbox to Display Image Attachments
Thu, May 15th 2014 9
Gridx in XPages – Creating a Simple Grid
Thu, Nov 6th 2014 9
Dojo in XPages – 14: Custom Animations
Tue, Mar 18th 2014 8
Computing Custom Date Format Patterns Throughout an Application
Mon, Aug 18th 2014 8
Dojo in XPages – 5: Array Utilities
Tue, Feb 18th 2014 7
Dojo in XPages – 6: Selecting a DOM Element with dojo.byId()
Thu, Feb 20th 2014 7
Gridx in XPages – 5: Modularizing Common Resources
Tue, Nov 11th 2014 7

Computing Custom Date Format Patterns Throughout an Application
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Brad Balassaitis    

If you want to ensure consistency in date formatting throughout your application, you can define the pattern for each Edit Box or Computed Value control that displays a date. What you may not have considered is that you can compute the date format, so you can define it in one place and use the same format everywhere. In this post, I’ll show how you can set it up and even change it conditionally.

Locale Conversions

The browser will automatically attempt to format dates based on your specified locale. Here’s an example of a computed field set to display a date. The Display type must be set to Date/Time.

Date Format 1a Default Date Format - Settings

Here’s how it displays in my browser when the language is set to English:

Date Format 1b Default Date - English

Here’s how it displays when I change my browser language to French:
Date Format 1c Default Date - French

Custom Date Patterns

If you want to change the default formatting, you can define a custom date format pattern.

To define a specific pattern, change Display format to Custom and then you can edit the Pattern field. (You can select a pre-defined pattern or enter your own.)

Date Format 2 - Custom Date Format

In this case, the pattern will stay the same, regardless of the browser language.

(Note: When defining a date pattern, the month value uses one or more capital M’s, because the lower case m is for minutes when defining a time pattern.)

Computing Date Patterns

Just like most other properties in XPages, there’s a blue diamond next to the Pattern field, allowing you to use SSJS to compute it. This gives you the opportunity to create a library function to return some pattern to use. Then, you can set all of your date controls to call the same function and modify the pattern in one place.

Your library function could be as simple as this:

function getDateFormat() {
  return 'dd-MMM-yyyy';

Taking it one step further, you could add logic in the function to conditionally determine the pattern, whether it be based on a user preference or a locale or just changing date formatting patterns on a daily basis because you like to mess with your users.

If you use more complex logic, you may also want to consider storing the pattern in an applicationScope variable, so it’s available throughout the application.

function getDateFormat() {
  if (!applicationScope.dateFormat) {
    // Logic to determine date format
    applicationScope.put('dateFormat', some_date_format);

  return applicationScope.dateFormat;

Computation Timing

The default setting for the logic Compute Dynamically (#). If you leave it that way, it will throw this error when you load the page: The value of the property pattern cannot be a run time

To fix this, select Compute on Page Load when entering/editing the snippet or change the octothorpe/pound sign/hash (#) to a dollar sign ($) in the page source, because date pattern computations only work on page load.

Compute Date Formats - 3

Quick Replace

If you’ve already set up hard-coded patterns on date fields, they would look something like this:

You can do a quick search and replace to modify them all easily.

Search for:


Compute Date Formats - 4a

Click the Replace... button rather than the Search button.

Then replace with:

pattern="${javascript:return getDateFormat();}"

Compute Date Formats - 4b

Aug 18, 2014
9 hits

Recent Blog Posts

Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition