Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Abhishek Dhingra
AUI Date Time Selector
April 10, 2012 4:22 AM
Answer

Abhishek Dhingra

Rank: Junior Member

Posts: 52

Join Date: April 7, 2011

Recent Posts

Hello All,

I was trying to implement the Date-Time selector functionality in my new Spring Portlet with Liferay 6.1 CE version..
My requirement is i need to have the same type of UI for date-time selector as shown below ( same as display-date in Announcements portlet).
Could you please help me in implementing the same. Also, kindly guide me how i can save the selected values.

Thanks,
Abhishek
Attachment

Attachments: untitled1.JPG (4.6k)
Abhishek Dhingra
RE: AUI Date Time Selector
April 13, 2012 3:44 AM
Answer

Abhishek Dhingra

Rank: Junior Member

Posts: 52

Join Date: April 7, 2011

Recent Posts

Hi,

Found the solution, so posting the same below:

<div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />startDatePicker">
<input type="hidden" name="startDate" id="<portlet:namespace />startDate" size="30" />
</div>
<p>
<%
Calendar defaultValueDate = CalendarFactoryUtil.getCalendar();
%>
<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-time amPmParam="ampm" hourParam="hour" minuteParam="min" minuteInterval="10"/>

</p>
***************************************************************************************************************************************************************************************
<aui:script>
AUI().use('aui-datepicker', function(A) {

var simpleDatepicker1 = new A.DatePicker({

trigger: '#<portlet:namespace />startDate',

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

});
</aui:script>
***************************************************************************************************************************************************************************************

Thanks,
Abhishek
Amey Panke
RE: AUI Date Time Selector
May 24, 2012 9:16 PM
Answer

Amey Panke

Rank: New Member

Posts: 12

Join Date: May 24, 2012

Recent Posts

thnks Abhishek .....
Robin Nagpal
RE: AUI Date Time Selector
December 9, 2014 6:01 AM
Answer

Robin Nagpal

Rank: Junior Member

Posts: 42

Join Date: November 18, 2014

Recent Posts

Abhishek Dhingra:
Hi,


<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 %>"
/>



I dont see all of these attributes in 6.2.x liferay:ui tld https://github.com/liferay/liferay-portal/blob/6.2.x/util-taglib/src/META-INF/liferay-ui.tld

Can you please let me know how can we render the date selector. I dont want to use AUI as it doesn't allow year to be selected in a drop down. Since I am using the input for Date of Birth, I need to provide a convenient way to select month and year