如何仅通过单独的图标而不是引用的输入字段激活YUI Datepicker？ [英] How do I activate a YUI Datepicker only by a seperate Icon, not by the referenced input field?

问题描述

我想显示AUI / YUI DatePicker （教程）点击相应的图标不<<激活 / strong>在焦点或正常点击事件。

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>

我试图使用

• 作为容器的图标，手动读取和写入日期，弹出窗口不再出现


• e.preventDefault（）和 e.stopPropagation（） for focus 和点击输入上的事件，但它没有压缩日历显示

• 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

似乎不可能将Datepicker与输入连接，而是将显示/隐藏与输入的使用分开。任何想法？

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?

这都在Liferay 6.2中的JSF 2.1 Portlet中，如果重要的话，输入是由以下构建的：

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>

推荐答案

除非我弄错了，否则听起来像你想要的 DatePicker 的图标是触发器，您希望它更新输入。如果是这样，以下代码应该可以解决这个问题：

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>

附注：如果您想要输入更新 DatePicker ，您可能会做一些事情就像我在 initDatePickerShowOnButton 方法。

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.

另外，此代码的最终结果与Liferay Faces Alloy非常相似 < alloy：inputDate showOn =button/> 组件（使用AlloyUI DatePicker ）。因此，您可能需要检查一下，看看我们是否已经以更加JSF的方式解决了您的问题。

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.

完全披露：我是Liferay Faces团队的一员，我个人写了合金：inputDate 。

Full Disclosure: I am part of the Liferay Faces team, and I personnally wrote alloy:inputDate.

这篇关于如何仅通过单独的图标而不是引用的输入字段激活YUI Datepicker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！