1. Home
  2. Development
  3. AUI Date Time Selector

AUI Date Time Selector

Abhishek Dhingra, modified 14 Years ago.
AUI Date Time Selector
Junior Member Posts: 51 Join Date: 4/8/11 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

Attachments:

Abhishek Dhingra, modified 14 Years ago.
RE: AUI Date Time Selector
Junior Member Posts: 51 Join Date: 4/8/11 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, modified 14 Years ago.
RE: AUI Date Time Selector
New Member Posts: 12 Join Date: 5/24/12 Recent Posts
thnks Abhishek .....
thumbnail
Robin Nagpal, modified 11 Years ago.
RE: AUI Date Time Selector
Junior Member Posts: 44 Join Date: 11/18/14 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
Tushar Patel, modified 10 Years ago.
RE: AUI Date Time Selector
New Member Posts: 12 Join Date: 8/26/14 Recent Posts
Have you found solution? I am looking for same.