Как активировать YUI Datepicker только отдельным значком, а не указанным полем ввода?
Я хочу отобразить AUI / YUIDatePicker (Руководство) тоттолько активируется нажатием на соответствующую иконку,не наfocus
или жеclick
события как обычно.
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>
Я пытался использовать
значок в виде контейнера и прочитайте и напишите дату вручную, и всплывающее окно больше не появляетсяe.preventDefault()
а такжеe.stopPropagation()
заfocus
а такжеclick
события на входе, но он не подавляет показанный календарьКажется, что невозможно соединить Datepicker со входом, но отделить показ / скрытие от использования входа. Есть идеи?
Это все внутри портлета JSF 2.1 в Liferay 6.2, если это имеет значение, входные данные формируются с помощью:
<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>