How do I activate a YUI Datepicker only by a seperate Icon, not by the referenced input field?

Question

I want to display a AUI / YUI DatePicker (Tutorial) that only gets activated by a click on a corresponding icon, not on focus or click events as normal.

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>

I tried to use

• the icon as the container and read and write the date manually and the popup didn't appear any more
• e.preventDefault() and e.stopPropagation() for focus and click events on the input, but it didn't supress the calender to be shown

It doesn't seem to be possible to connect the Datepicker with the input but seperate the showing/hiding from the usage of the input. Any ideas?

This is all inside a JSF 2.1 Portlet in Liferay 6.2, if it matters, the input is build by:

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

Answer 1

Unless I'm mistaken, it sounds like you want the icon to be the trigger for the DatePicker and you want it to update the input. If so, the following code should do the trick:

var AUI = YUI;

AUI().use('aui-datepicker', function(A) {

    var input = A.one('#input');
    var datePicker = new A.DatePicker({
        trigger: '#div',
        calendar: {
            on: {
                dateClick: function(event) {
                    input.set('value', A.Date.format(event.date,{format:datePicker.get('mask')}));
                }
            }
        }
    });
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
    <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<input id="input" /><div id="div" class="icon-calendar">Click Me to Pop Up Calendar</div>

Side note: if you wanted the input to update the the DatePicker you could probably do something like what I'm doing in my initDatePickerShowOnButton method.

Also, the end result of this code looks very similar to the Liferay Faces Alloy <alloy:inputDate showOn="button" /> component (which uses the AlloyUI DatePicker). So you may want to check that out and see if we've already solved your problem in a more JSF-ish way.

Full Disclosure: I am part of the Liferay Faces team, and I personnally wrote alloy:inputDate.