Comment activer un YUI Datepicker uniquement par une icône séparée, et non par le champ de saisie référencé?

Je souhaite afficher un DatePicker AUI / YUI ( Didacticiel ) qui ne s'active que par un clic sur une icône correspondante, pas sur la focus au focus ou click événements comme d'habitude.

 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>

J'ai essayé d'utiliser

L'icône en tant que conteneur et lire et écrire la date manuellement et la fenêtre contextuelle n'a plus apparu
e.preventDefault() et e.stopPropagation() pour la focus au focus et click sur les événements sur l'entrée, mais il n'a pas supprimé le calendrier à afficher

Il ne semble pas possible de connecter le Datapicker avec l'entrée, mais séparer l'affichage / la dissimulation de l'utilisation de l'entrée. Des idées?

Ceci est tout dans un portlet JSF 2.1 dans Liferay 6.2, si cela compte, l'entrée est construite par:

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

À moins que je ne me trompe, il semble que vous voulez que l'icône soit le trigger du DatePicker et que vous souhaitez qu'il mette à jour l'entrée. Dans l'affirmative, le code suivant devrait faire l'affaire:

 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>