如何仅通过单独的图标而不是引用的输入字段激活 YUI 日期选择器

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

本文关键字：激活 输入 字段 YUI 选择器 日期 引用 何仅通 单独 图标      更新时间：2023-09-26

我想显示一个AUI/YUI DatePicker（教程），它只能通过单击相应的图标来激活，而不是像往常一样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 : {
		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()输入上的focus和click事件，但它没有抑制要显示的日历

似乎无法将日期选择器与输入连接，但将显示/隐藏与输入的使用分开。有什么想法吗？

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

<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的trigger，并且您希望它更新输入。如果是这样，以下代码应该可以解决问题：

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方法中所做的那样做一些事情。

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

完全披露：我是Liferay Faces团队的一员，我亲自写了alloy:inputDate。

相关文章：