Fórum
How to customize date format and localization of DatePicker
xun ren, modificado 12 Anos atrás.
How to customize date format and localization of DatePicker
Junior Member Postagens: 81 Data de Entrada: 01/04/08 Postagens Recentes
Hello,
I use this code to render a popup calendar selection for my registration field "Birthday":
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!
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, modificado 12 Anos atrás.
RE: How to customize date format and localization of DatePicker
Expert Postagens: 358 Data de Entrada: 17/11/10 Postagens Recentes
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,
Refer this for getting more idea,
http://alloy.liferay.com/deploy/api/DatePickerSelect.html
http://alloy.liferay.com/deploy/api/Calendar.html
Regards,
Mayur
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=”<%= false %>”
firstDayOfWeek=”<%= defaultValueDate.getFirstDayOfWeek() – 1 %>”
monthParam=”month”
monthValue=”<%= defaultValueDate.get(Calendar.MONTH) %>”
yearParam=”year”
yearValue=”<%= defaultValueDate.get(Calendar.YEAR) %>”
yearRangeStart=”<%= defaultValueDate.get(Calendar.YEAR) %>”
yearRangeEnd=”<%= defaultValueDate.get(Calendar.YEAR) + 50 %>”
/></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, modificado 12 Anos atrás.
RE: How to customize date format and localization of DatePicker
Junior Member Postagens: 81 Data de Entrada: 01/04/08 Postagens RecentesMayur 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=”<%= false %>” firstDayOfWeek=”<%= defaultValueDate.getFirstDayOfWeek() – 1 %>” monthParam=”month” monthValue=”<%= defaultValueDate.get(Calendar.MONTH) %>” yearParam=”year” yearValue=”<%= defaultValueDate.get(Calendar.YEAR) %>” yearRangeStart=”<%= defaultValueDate.get(Calendar.YEAR) %>” yearRangeEnd=”<%= defaultValueDate.get(Calendar.YEAR) + 50 %>” /></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, modificado 12 Anos atrás.
RE: How to customize date format and localization of DatePicker
Expert Postagens: 358 Data de Entrada: 17/11/10 Postagens Recentes
Hope Admin has an idea about this and take some action as he is publishing ads everywhere.
Thanks,
Mayur
Thanks,
Mayur
James Falkner, modificado 12 Anos atrás.
RE: How to customize date format and localization of DatePicker
Liferay Legend Postagens: 1399 Data de Entrada: 17/09/10 Postagens RecentesMayur 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, modificado 12 Anos atrás.
RE: How to customize date format and localization of DatePicker
Expert Postagens: 349 Data de Entrada: 21/07/11 Postagens Recentes
Hi !!
can anyone plz explain how to use Datepicker in my JSP page....????
thnx !!
can anyone plz explain how to use Datepicker in my JSP page....????
thnx !!
Hitoshi Ozawa, modificado 12 Anos atrás.
RE: How to customize date format and localization of DatePicker
Liferay Legend Postagens: 7942 Data de Entrada: 24/03/10 Postagens Recentes
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
That said, the following thread has an example.
http://www.liferay.com/community/forums/-/message_boards/message/11503625
meera prince, modificado 11 Anos atrás.
RE: How to customize date format and localization of DatePicker
Liferay Legend Postagens: 1111 Data de Entrada: 08/02/11 Postagens Recentes
<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>
<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, modificado 11 Anos atrás.
RE: How to customize date format and localization of DatePicker
Liferay Legend Postagens: 1111 Data de Entrada: 08/02/11 Postagens Recentes
<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>
<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>