Time picker with 24-hour/military time format (or any other custom time format) in XPages

It’s not straightforward, but with a little digging in the source, you can create a time picker with 24-hour time (aka military time) format in XPages. It sounds like a simple request, but it was slightly more complicated than you might expect. (Note: The same concept applies to any time picker with a Custom format.)

The properties for a time picker field generally look something like this:


This produces this time picker in the UI:


Changing the Time Format

To change the time format, I first checked the Time style drop-down, but none of its formats were 24-hour:


I know that the custom format for 24-hour time is HH:mm, so I changed the Display format from “Time only” to “Custom” and selected HH:mm as the format (I manually removed the ‘z’ that was part of the format in the list).


But the picker changed to a calendar picker on the front end!


Time Picker Source

Here’s the source code generated when it’s set to Time only:

<xp:inputText id="scheduledTime"
    <xp:convertDateTime type="time">

Here’s what it changed to when I set it to Custom and set the format:

<xp:inputText id="scheduledTime"
    <xp:convertDateTime pattern="HH:mm">

The Solution

Changing the Display format to Custom added the pattern attribute, but removed the type="time" attribute from the xp:convertDateTime tag, which changed it back to the default date picker.

So, with the Display format set to Custom and the pattern set to HH:mm, I just added the type="time" attribute on line 4 to force it to be a time picker.

<xp:inputText id="scheduledTime"
    <xp:convertDateTime type="time" pattern="HH:mm">

Now, it is a time picker in 24-hour format:



3 responses to “Time picker with 24-hour/military time format (or any other custom time format) in XPages”

  1. Dan O'Connor says :

    Refer to Java’s documentation on how to apply patterns to the date time converter:

  2. Sidrah says :

    Can we convert time as 2400 hour format in the computed field of DataTable – Xpage

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: