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

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>