How to set <aui:input> tag's calendar date and locale in Liferay 6.2 CE GA2?

Question

I'm currently unable to set <aui:input> tag's calendar date and locale format:

• It's still showing up an empty non-localized input pattern (mm/dd/yyyy)
• While clicking to expand the calendar, date selected is always NOW even if a Date value is specified
• When a date is selected in the calendar, then input field is filled with the selected date, but in the wrong format (still as mm/dd/yyyy)

I cannot upload images or share more than one link due to my reputation, so I'm merging up those three cases mentioned before into a single image in here.

This is what I'm currently doing in my .jsp file:

<%
Calendar calendar = CalendarFactoryUtil.getCalendar(themeDisplay.getTimeZone(), themeDisplay.getLocale());
Date date = new Date(571096800000l); // A random date different than NOW.
calendar.setTime(date);
System.out.println("calendar date = " + calendar.getTime()); // Fri Feb 05 22:00:00 GMT 1988

Format formatter = FastDateFormatFactoryUtil.getDate(themeDisplay.getLocale(), themeDisplay.getTimeZone());
String formattedDate = formatter.format(date);
System.out.println("formatted date = " + formattedDate); // formatted date = 5.02.88
%>

<aui:input type="date" name="test1" value="<%= calendar %>"/>
<aui:input type="date" name="test2" value="<%= calendar.getTime() %>"/>                 
<aui:input type="date" name="test3" value="<%= date %>"/>
<aui:input type="date" name="test4" value="<%= date.getTime() %>"/>
<aui:input type="date" name="test5" value="<%= date %>"/>
<aui:input type="date" name="test6" value="<%= date.getTime() %>"/>
<aui:input type="date" name="test7" value="<%= formattedDate %>"/>

Thanks a lot for your time!

Answer 1

It seems you have successfully fooled yourself into thinking that AlloyUI in Liferay actually supports the type="date", it does not. The calendar that you see on your screenshots is provided by Chrome because AlloyUI constructs an input type="date" and then Chrome does the HTML5 magic and provides you the date input.

The correct answer is that AUI does not support Date input at all and you have to switch your implementation to something else. The proposed liferay-ui:input-date is a good alternative but if you prefer something better then try jQuery UI datepicker that allows you to specify both display format and alternative format that you submit to the server.

The bad side is that you probably should implement your own taglib to make it nicely reusable.