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 werdenEs 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>