Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
xun ren
How to customize date format and localization of DatePicker
December 12, 2011 3:01 PM
Answer

xun ren

Rank: Junior Member

Posts: 82

Join Date: April 1, 2008

Recent Posts

Hello,

I use this code to render a popup calendar selection for my registration field "Birthday":

1 AUI().ready('aui-datepicker', function(A) {
2        var calendar1 = new A.DatePicker({
3            trigger: '#birthday',
4            dateFormat: '%d-%m-%y',
5            locale: 'fr_FR'
6        }).render();



But the option dateFormat and locale do not work. Could you tell me how can I customize the date format and localization correctly?

Thanks in advance!
Mayur Patel
RE: How to customize date format and localization of DatePicker
December 12, 2011 11:21 PM
Answer

Mayur Patel

Rank: Expert

Posts: 341

Join Date: November 17, 2010

Recent Posts

Hi,

dateFormat - String
The default date format string which can be overriden for localization support. The format must be valid according to A.DataType.Date.format.
Default Value: %m/%d/%Y

Following is the simple but very useful script to display localized calendar date picker-

you can also Localized Calendar Date Picker like this,

 1Calendar defaultValueDate = CalendarFactoryUtil.getCalendar(timeZone, locale);
 2
 3<liferay-ui:input-date
 4
 5dayValue=”<%= defaultValueDate.get(Calendar.DATE) %>”
 6
 7dayParam=”day”
 8
 9disabled=”<%= false %>”
10
11firstDayOfWeek=”<%= defaultValueDate.getFirstDayOfWeek() – 1 %>”
12
13monthParam=”month”
14
15monthValue=”<%= defaultValueDate.get(Calendar.MONTH) %>”
16
17yearParam=”year”
18
19yearValue=”<%= defaultValueDate.get(Calendar.YEAR) %>”
20
21yearRangeStart=”<%= defaultValueDate.get(Calendar.YEAR) %>”
22
23yearRangeEnd=”<%= defaultValueDate.get(Calendar.YEAR) + 50 %>”
24
25/>


Refer this for getting more idea,
http://alloy.liferay.com/deploy/api/DatePickerSelect.html
http://alloy.liferay.com/deploy/api/Calendar.html

Regards,
Mayur
Mayur Patel
RE: How to customize date format and localization of DatePicker
December 14, 2011 5:27 AM
Answer

Mayur Patel

Rank: Expert

Posts: 341

Join Date: November 17, 2010

Recent Posts

Hope Admin has an idea about this and take some action as he is publishing ads everywhere.

Thanks,
Mayur
xun ren
RE: How to customize date format and localization of DatePicker
December 14, 2011 6:59 AM
Answer

xun ren

Rank: Junior Member

Posts: 82

Join Date: April 1, 2008

Recent Posts

Mayur Patel:
Hi,

dateFormat - String
The default date format string which can be overriden for localization support. The format must be valid according to A.DataType.Date.format.
Default Value: %m/%d/%Y

Following is the simple but very useful script to display localized calendar date picker-

you can also Localized Calendar Date Picker like this,

 1Calendar defaultValueDate = CalendarFactoryUtil.getCalendar(timeZone, locale);
 2
 3<liferay-ui:input-date
 4
 5dayValue=”<%= defaultValueDate.get(Calendar.DATE) %>”
 6
 7dayParam=”day”
 8
 9disabled=”<%= false %>”
10
11firstDayOfWeek=”<%= defaultValueDate.getFirstDayOfWeek() – 1 %>”
12
13monthParam=”month”
14
15monthValue=”<%= defaultValueDate.get(Calendar.MONTH) %>”
16
17yearParam=”year”
18
19yearValue=”<%= defaultValueDate.get(Calendar.YEAR) %>”
20
21yearRangeStart=”<%= defaultValueDate.get(Calendar.YEAR) %>”
22
23yearRangeEnd=”<%= defaultValueDate.get(Calendar.YEAR) + 50 %>”
24
25/>


Refer this for getting more idea,
http://alloy.liferay.com/deploy/api/DatePickerSelect.html
http://alloy.liferay.com/deploy/api/Calendar.html

Regards,
Mayur


Thanks Mayur,

I understand what you explained to me, it's useful. But in my case, I do not want to display the three drop-down lists. I have an input field named "birthday", once a user focus on this input, I will display a popup calendar for him to select his birthday. It's just like the jQuery datapicker which is very simple and powerful. Since Liferay switched to AUI, it's not a good manner to integrate jQuery with AUI. According to the Doc of A.Calendar, there is no attribute "locale", but it is available in A.DatePickerSelection.

Regards.
James Falkner
RE: How to customize date format and localization of DatePicker
December 15, 2011 6:34 AM
Answer

James Falkner

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1218

Join Date: September 17, 2010

Recent Posts

Mayur Patel:
Hope Admin has an idea about this and take some action as he is publishing ads everywhere.

Thanks,
Mayur


This person has been banned and I am deleting his posts (there are about 20 of them). We are looking at better ways of preventing this in the future!
Zeeshan Khan
RE: How to customize date format and localization of DatePicker
December 19, 2011 2:31 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

Recent Posts

Hi !!

can anyone plz explain how to use Datepicker in my JSP page....????


thnx !!
Hitoshi Ozawa
RE: How to customize date format and localization of DatePicker
December 25, 2011 6:01 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7990

Join Date: March 23, 2010

Recent Posts

You really should create a new thread when posting a new question unrelated to the title of the thread.

That said, the following thread has an example.
http://www.liferay.com/community/forums/-/message_boards/message/11503625
Meera Prince
RE: How to customize date format and localization of DatePicker
May 21, 2012 2:02 PM
Answer

Meera Prince

Rank: Liferay Master

Posts: 820

Join Date: February 8, 2011

Recent Posts

<div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />startDatePicker">

<input type="text" name="startDate" id="<portlet:namespace />startDate" size="30" />

</div>

<aui:script>

AUI().use('aui-datepicker', function(A) {

var simpleDatepicker1 = new A.DatePicker({

trigger: '#<portlet:namespace />startDate',
calendar: {
dateFormat: '%Y-%m-%d'},

}).render('##<portlet:namespace />startDatePicker');

});

</aui:script>
Meera Prince
RE: How to customize date format and localization of DatePicker
May 21, 2012 2:03 PM
Answer

Meera Prince

Rank: Liferay Master

Posts: 820

Join Date: February 8, 2011

Recent Posts

<div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />startDatePicker">

<input type="text" name="startDate" id="<portlet:namespace />startDate" size="30" />

</div>

<aui:script>

AUI().use('aui-datepicker', function(A) {

var simpleDatepicker1 = new A.DatePicker({

trigger: '#<portlet:namespace />startDate',
calendar: {
dateFormat: '%Y-%m-%d'},

}).render('##<portlet:namespace />startDatePicker');

});

</aui:script>