Hidden Features of Liferay Faces: The nativeWhenMobile Attribute of alloy:inputDate and alloy:inputTime

One of my favorite lesser-known features of Liferay Faces Alloy is the the nativeWhenMobile attribute of alloy:inputDate and alloy:inputTime.¹ When a user on a mobile device views an alloy:inputDate or alloy:inputTime with nativeWhenMobile="true", the inputDate or inputTime component will render an input with type="date" or type="time" repectively instead of the normal AlloyUI JavaScript DatePicker or TimePicker.² The advantage of rendering a input with type="date" or type="time" on mobile devices is that it causes the device to utilize the built-in, touch-friendly date picker or time picker of the device’s OS. Here’s a visual comparison of the rendered pickers on different devices:

alloy:inputDate
On Desktop	On iPhone	On Android

alloy:inputTime
On Desktop	On iPhone	On Android

If you want to see a live demo of this feature, navigate to the Liferay Faces Alloy Showcase General examples for alloy:inputDate or alloy:inputTime on a mobile device.

How can you take advantage of the UX improvement of native date or time pickers on mobile devices? Well, if you are using Liferay Faces Alloy’s inputDate or inputTime in your JSF application, mobile users are already using native pickers! The nativeWhenMobile attribute defaults to true so it is turned on by default. With nativeWhenMobile="true", you can display a powerful Liferay-themed input and picker for larger devices while presenting users with a familiar, touch-friendly, native date or time picker on mobile devices.

1. Even I neglected to mention this feature in my own blog about the Liferay Faces Alloy input components! Shame on me! ↵

2. Although I implemented this feature, I cannot take credit for coming up with the idea. The Liferay Faces Team stole borrowed the idea from the core portal’s liferay-ui:input-date component. This feature was implemented in liferay-ui:input-date by Eduardo Lundgren. ↵