How to customize date format and localization of DatePicker

[xun ren, modifié il y a 12 années.]

Hello,

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

 AUI().ready('aui-datepicker', function(A) {
	    var calendar1 = new A.DatePicker({
	        trigger: '#birthday',
	        dateFormat: '%d-%m-%y',
	        locale: 'fr_FR'
	    }).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, modifié il y a 12 années.]

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,

Calendar defaultValueDate = CalendarFactoryUtil.getCalendar(timeZone, locale);

<liferay-ui:input-date dayvalue="”<%=" defaultvaluedate.get(calendar.date) %>”

dayParam=”day”

disabled=”&lt;%= false %&gt;”

firstDayOfWeek=”&lt;%= defaultValueDate.getFirstDayOfWeek() – 1 %&gt;”

monthParam=”month”

monthValue=”&lt;%= defaultValueDate.get(Calendar.MONTH) %&gt;”

yearParam=”year”

yearValue=”&lt;%= defaultValueDate.get(Calendar.YEAR) %&gt;”

yearRangeStart=”&lt;%= defaultValueDate.get(Calendar.YEAR) %&gt;”

yearRangeEnd=”&lt;%= defaultValueDate.get(Calendar.YEAR) + 50 %&gt;”

/&gt;</liferay-ui:input-date>

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

Regards,
Mayur

[xun ren, modifié il y a 12 années.]

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,

Calendar defaultValueDate = CalendarFactoryUtil.getCalendar(timeZone, locale);

<liferay-ui:input-date dayvalue="”<%=" defaultvaluedate.get(calendar.date) %>”

dayParam=”day”

disabled=”&lt;%= false %&gt;”

firstDayOfWeek=”&lt;%= defaultValueDate.getFirstDayOfWeek() – 1 %&gt;”

monthParam=”month”

monthValue=”&lt;%= defaultValueDate.get(Calendar.MONTH) %&gt;”

yearParam=”year”

yearValue=”&lt;%= defaultValueDate.get(Calendar.YEAR) %&gt;”

yearRangeStart=”&lt;%= defaultValueDate.get(Calendar.YEAR) %&gt;”

yearRangeEnd=”&lt;%= defaultValueDate.get(Calendar.YEAR) + 50 %&gt;”

/&gt;</liferay-ui:input-date>

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.

[Mayur Patel, modifié il y a 12 années.]

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

Thanks,
Mayur

[James Falkner, modifié il y a 12 années.]

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, modifié il y a 12 années.]

Hi !!

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


thnx !!

[Hitoshi Ozawa, modifié il y a 12 années.]

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, modifié il y a 11 années.]

<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, modifié il y a 11 années.]

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