flob flob - 7 months ago 16
Javascript Question

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

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

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')}));
                }
            }
        }
    });
});
<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>
<input id="input" /><div id="div" class="icon-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.