AUI DatePicker?

[Adam Spence, modificado hace 12 años.]

Hello,

I'm using aui-datepicker(not aui-datepicker-select) to populate a date input field.

My problem is this: I would like the calendar pop-up to appear when the user clicks on a calendar icon beside the field. Currently the user must click on the field itself to bring up the calendar pop-up.

I've been able to find almost no documentation on aui-datepicker. The best resource is here: http://blogs.xtivia.com/home/-/blogs/liferay-alloy-ui-calendar-datepicker-and-datepickerselect

Here is my code:

Javascript\

<aui:script>

	AUI().use('aui-datepicker', function(A) {
	
		var simpleDatePicker1 = new A.DatePicker({
			trigger: '#fromDate',
		}).render('#<portlet:namespace />fromDatePicker');
		A.one('#fromDate').val("");
	
		var simpleDatePicker2 = new A.DatePicker({
			trigger: '#toDate'
		}).render('#<portlet:namespace />toDatePicker');
		A.one('#toDate').val("");
		
	});

</aui:script>

HTML

		<fieldset>
		
				<label class="portlet-form-label">
					<spring:message code="contentsearch.field.fromdate" />
				</label>
				<div style="float:right;" class="aui-datepicker aui-helper-clearfix" id="<portlet:namespace />fromDatePicker">
					<form:input id="fromDate" name="fromDate" path="fromDate" cssClass="portlet-form-field" />
					<img style="float:right;" src="/provider-theme/images/iconCalendar.gif" id="fromDatePickerIcon">
				</div>
				
				<br>
				<br>
				
				<label class="portlet-form-label">
					<spring:message code="contentsearch.field.todate" />
				</label>
				<div style="float:right;" class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />toDatePicker">
					<form:input id="toDate" name="toDate" path="toDate" cssClass="portlet-form-field" />
					<img style="float:right;" src="/provider-theme/images/iconCalendar.gif" id="toDatePickerIcon">
				</div>	
		
		</fieldset>

So the key here is using the icon as the trigger, but having it populate the date input field. If I change the trigger to use the icon css id, the calendar popup appears successfully when i click the icon, but then the input field isn't populated when I select a date from the calendar.

Any ideas?

Thanks in advance,
Adam

[Mayur Patel, modificado hace 12 años.]

Can you try below code and see if it works for you

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:defineobjects />

<aui:input type="text" name="inputDisplay" size="15" value="" id="inputDisplay" />
<aui:input type="text" name="inputTBA" size="15" value="" id="inputTBA" />
<div class="calendar-icon" id="imageDiv">
		<span class="aui-icon aui-icon-calendar"></span>
</div>
<div id="calendarDiv"></div>

<script type="text/javascript">

renderCalendar('#imageDiv','#<portlet:namespace/>inputDisplay','#<portlet:namespace/>inputTBA','#calendarDiv');
function renderCalendar(imageDiv,inputDisplay,inputTBA,calendarDiv)  {
  alert(imageDiv);
  alert(inputDisplay);
  alert(inputTBA);
  alert(calendarDiv);
  AUI().ready('aui-calendar', function(A) {
	var inputField1 = A.one(imageDiv); 
	var inputField2 = A.one(inputDisplay);
	var inputField3 = A.one(inputTBA);

	var calendar1 = new A.Calendar({    
		dates: [ new Date() ],   
		dateFormat: '%m-%d-%Y',     
		selectMultipleDates: false,        
		after: {                        
			datesChange: function(event) {         
						var formatted = event.target.getFormattedSelectedDates();       
						inputField2.val(formatted); 
						if(formatted != ''){
							inputField3.val(reformatDate(formatted));
						}else{
							inputField3.val('');
						}
						calendar1.toggle(); // hide after a date was selected        
					}        
				}
	}).render(calendarDiv);   

	var boundingBoxCal1 = calendar1.get('boundingBox');  
	boundingBoxCal1.setX(inputField1.getX());         
	boundingBoxCal1.setY(inputField1.getY() + 25);      
	calendar1.hide(); 
	inputField1.on('click', function() { calendar1.toggle(); });        
});
}

function reformatDate(date)
{
  var dateStr=date.toString();
  dArr=dateStr.split("-");
  return dArr[2]+ "-" +dArr[1]+ "-" +dArr[0]; 
}

</script>

Thanks

[Adam Spence, modificado hace 12 años.]

Mayur,

Thank you! That works well! One thing though: if I want to make the pop-up calendar appear in a separate layer, so that it doesn't expand/affect the portlet content, how would I do that?

Thanks,
Adam

[Mayur Patel, modificado hace 12 años.]

I think for that you need to apply some styles on div on which pop-up calandar is opening

[Rafa Quinonero, modificado hace 12 años.]

Adam Spence:

Mayur,

Thank you! That works well! One thing though: if I want to make the pop-up calendar appear in a separate layer, so that it doesn't expand/affect the portlet content, how would I do that?

Thanks,
Adam

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

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

    });

</aui:script>

//In your portlet render or action method add the below code to get the date from the request parameter:

DateFormat df = new SimpleDateFormat("MM/dd/yyyy");

Date startDate = df.parse(actionRequest.getParameter("startDate"));

[Mayur Patel, modificado hace 12 años.]

Thanks for sharing the code !!!

[Bodhayan Chakraborty, modificado hace 11 años.]

The AUI datepicker is not navigating to the previous month if the current month's 31st day is selected. Suppose, if the 05/31/2012 is selected in the dropdown, the navigator is not going to the previous month. Any idea?

Thanks,
Bodhayan.

[devaraj s, modificado hace 10 años.]

Bodhayan Chakraborty:

The AUI datepicker is not navigating to the previous month if the current month's 31st day is selected. Suppose, if the 05/31/2012 is selected in the dropdown, the navigator is not going to the previous month. Any idea?

Thanks,
Bodhayan.

I am also facing same issue here, Did u find what is the issue?
or anyone know what is issue for this type of behaviour.?

[me liferay, modificado hace 10 años.]

Hi Mayur,
Thank you for sharing this code I am able to use your code successfully.
Just one issue is that Date input field and calender icon both are coming in two different line(PFA image) could you please guide me how to show them in single line?

[Mayur Patel, modificado hace 10 años.]

You can make use of css to get the same look and feel.

If you've already done the same then you can provide the solution here.

Thanks.