Como ativo um Datepicker YUI apenas por um ícone separado, não pelo campo de entrada referenciado?

Question

Nov 26, 2014, 04:36 PM

Como ativo um Datepicker YUI apenas por um ícone separado, não pelo campo de entrada referenciado?

Quero exibir um AUI / YUIDatePicker (Tutorial) quesó é ativado por um clique no ícone correspondente,não emfocus ouclick eventos normalmente.

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>

Eu tentei usar

o ícone como o contêiner e leia e escreva a data manualmente e o pop-up não apareceu maise.preventDefault() ee.stopPropagation() parafocus eclick eventos na entrada, mas não suprimiu o calendário a ser mostrado

Não parece possível conectar o Datepicker à entrada, mas separe a exibição / ocultação do uso da entrada. Alguma ideia?

Isso tudo está dentro de um portlet JSF 2.1 no Liferay 6.2, se isso importa, a entrada é criada por:

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