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:

MilitaryTimePicker_A

This produces this time picker in the UI:

MilitaryTimePicker_B

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:

MilitaryTimePicker_C

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).

MilitaryTimePicker_D

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

MilitaryTimePicker_E

Time Picker Source

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

<xp:inputText id="scheduledTime"
  value="#{doc.scheduledTime}>
  <xp:this.converter>
    <xp:convertDateTime type="time">
    </xp:convertDateTime>
  </xp:this.converter>
  <xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>  

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

<xp:inputText id="scheduledTime"
  value="#{doc.scheduledTime}>
  <xp:this.converter>
    <xp:convertDateTime pattern="HH:mm">
    </xp:this.converter>
  <xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>

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"
  value="#{doc.scheduledTime>
  <xp:this.converter>
    <xp:convertDateTime type="time" pattern="HH:mm">
    </xp:convertDateTime>
  </xp:this.converter>
  <xp:dateTimeHelper></xp:dateTimeHelper>
</xp:inputText>  

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

MilitaryTimePicker_F

Advertisements

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:
    http://docs.oracle.com/javase/6/docs/api/java/text/SimpleDateFormat.html

  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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: