Как активировать YUI Datepicker только по отдельному значку, а не по указанному полю ввода?

Question

Я хочу, чтобы отобразить AUI/YUI DatePicker (Tutorial), что только получает активируется нажатием на соответствующую иконку, не на focus или click событий, как обычно.

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 : { 
 
\t \t firstDayOfWeek : 1, 
 
    }, 
 
    popover : { 
 
\t \t 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>

Я пытался использовать

• значок в качестве контейнера и чтения и записи даты вручную, а всплывающее окно не появлялось больше
• e.preventDefault() и e.stopPropagation() для focus и click событий на входе, но он не подавил отображаемый каландр

Невозможно подключить Datepicker к входу, но отдельно отображать/скрывать от использования ввода. Есть идеи?

Это все внутри JSF 2.1 портлетов в Liferay 6.2, если это имеет значение, вход построен по:

<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

Если я не ошибаюсь, это звучит, как вы хотите значок быть trigger для DatePicker, и вы хотите, чтобы он обновил ввод. Если да, то следующий код должен сделать трюк:

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 Примечание: если вы хотите вход, чтобы обновить DatePicker вы могли бы, вероятно, сделать что-то вроде того, что я делаю в моем initDatePickerShowOnButton method.

Кроме того, конечный результат этого кода очень похож на компонент Layeray Faces Alloy <alloy:inputDate showOn="button" /> (который использует AlloyUI DatePicker). Таким образом, вы можете проверить это и посмотреть, если мы уже решили вашу проблему более чем в JSF-ish.

Полное описание: Я являюсь частью команды Liferay Faces, и я лично написал alloy:inputDate.