AUI Datepicker Align

[Asier Guilló, modificado hace 6 años.]

I am using an AUI Datepicker on a input field and I get the following error :

Uncaught Error: align: Invalid Points Arguments
?browserId=other&minifierType=&languageId=en_US&b=7003&t=1504866953908&/o/frontend-js-web/aui/aui-widget-position-align-suggestion/aui-widget-position-align-suggestion-min.js&/o/frontend-js-web/aui/aui-popover/aui-popover-min.js&/o/frontend-js-web/aui/aui-datepicker-popover/aui-datepicker-popover-min.js&/o/frontend-js-web/aui/aui-datepicker/aui-datepicker-min.js:formatted:202
at YUI.error (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:422:125)
at m._getAlignedXY (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:1324:406)
at m._uiSetAlign (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:1325:78)
at q.Method.exec (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:819:186)
at m.z.(anonymous function).h.(anonymous function) [as _uiSetAlign] (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:817:500)
at m._afterAlignChange (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:1326:297)
at a.Subscriber._notify (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:828:322)
at a.Subscriber.notify (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:829:6)
at a.CustomEvent._notify (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:825:103)
at a.CustomEvent._procSubs (http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&themeId=classic_WAR_classictheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=en_US&b=7003&t=1504866953908:826:247)

This is my code:

AUI({ lang: 'es-ES' }).use('aui-datepicker', function(A) {
	datepicker2 = new A.DatePicker({});
	datepicker1 = new A.DatePicker({
		trigger : '#datepicker1',
		mask: '%d/%m/%Y',
		popover: {               
			zIndex: 1
		},
		calendar: {
			maximumDate: new Date(),
		},
		after: {
		    selectionChange: function(event) {
		    	setStartDate(event.newSelection);
		    	datepicker2.getCalendar().set('minimumDate', event.newSelection[0]);
		    }
		}
	});
	datepicker2 = new A.DatePicker({
		trigger : '#datepicker2',
		mask: '%d/%m/%Y',
		popover: {
			zIndex: 1
		},
		calendar: {
			maximumDate: new Date(),
		},
		after: {
			selectionChange: function(event) {
				setEndDate(event.newSelection);
				datepicker1.getCalendar().set('maximumDate', event.newSelection[0]);
				
			}
		}
	});
});

The html:

<div class="row">
	<div class="col-md-6">
  		<input id="datepicker1" class="form-control" type="text" label="Desde" readonly="true">
   	</div>
   	<div class="col-md-6">
		<input id="datepicker2" class="form-control" type="text" label="Hasta" readonly="true">
   	</div>
</div>

It seems to work correctly when I click in the inputs and select a date (datepicker1, datepicker2 images), but even when I haven't clicked in the input a datepicker appears in the background of the portlet, sometimes in the top and other in the bottom (error image).