Wie aktiviere ich einen YUI Datepicker nur durch ein separates Symbol, nicht durch das Eingabefeld, auf das verwiesen wird?

Ich möchte ein AUI / YUI anzeigenDatumsauswah (Lernprogram) Dasnu wird durch einen Klick auf ein entsprechendes Icon aktiviert,nich auffocus oderclick Ereignisse wie gewohnt.

var AUI = YUI;
AUI().use('event', 'aui-datepicker', function(A) {
function createCalendar(calendarInputBox) {
var datumInputField = calendarInputBox.one('input.calendar');
var datumInputFieldSelector = '#' + datumInputField.get('id').replace(/:/g, '\\:');
var datepickerIcon = calendarInputBox.one('.calendarInputIcon');

var datepicker = new A.DatePicker({
    container : datumInputFieldSelector,
    mask : '%d.%m.%Y',
    calendar : {
		firstDayOfWeek : 1,
    },
    popover : {
		zIndex : 1,
    }
});

function updateDatepickerFromInputAndShowDatepicker() {
    datumInputField.focus();
    datepicker.show();
}

datepickerIcon.on('click', updateDatepickerFromInputAndShowDatepicker);
}

A.all('.calendarInputBox').each(createCalendar);
});
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<span class="calendarInputBox" id="generated-0">
  <span class="calendarInputIcon">icon</span>
  <input id="generated-1" name="generated-2:form:from" type="text" value="" maxlength="10" class="calendar calendarFrom" />
</span>

Ich habe versucht, @ zu verwend

das Symbol als Container und das Datum manuell lesen und schreiben und das Popup erschien nicht mehre.preventDefault() unde.stopPropagation() zumfocus undclick Ereignisse auf dem Eingang, aber es hat den Kalender nicht unterdrückt, um angezeigt zu werden

Es scheint nicht möglich zu sein, den Datepicker mit dem Eingang zu verbinden, aber das Ein- / Ausblenden von der Verwendung des Eingangs zu trennen. Irgendwelche Ideen

Dies ist alles in einem JSF 2.1-Portlet in Liferay 6.2 enthalten. Wenn es darauf ankommt, wird die Eingabe wie folgt erstellt:

<span class="calendarInputBox">
<div class="calendarInputIcon"></div>
    <h:inputText id="from" value="#{searchData.from}" maxlength="10" styleClass="calendar calendarFrom">
        <f:convertDateTime pattern="dd.MM.yyyy" />
    </h:inputText>
</span>

Antworten auf die Frage(2)

Ihre Antwort auf die Frage