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

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.