AUI 日期选择器错误和解决方法答案

【问题标题】：AUI datepicker error and workaroundAUI 日期选择器错误和解决方法
【发布时间】：2012-02-15 12:55:07
【问题描述】：

我正在检查 Liferay Site 的 Alloy UI 日期选择器。

给定示例中的问题是没有选择选项。如果我的用户的出生日期是 70 年代，那么用户必须多次单击后退按钮。

这对用户来说不是一个快乐的场景。如何将我的 AUI javascript 编辑为 jquery here 给出的月份和年份选项

【问题讨论】：

你可以使用jquery datepicker
@Poonam 我可以，但我可能不会。我只需要使用 AUI

标签： javascript datepicker yui liferay-aui

【解决方案1】：

我假设您在这里使用的是 AlloyUI 1.5，因此我建议您使用 DatePickerSelect 组件，但使用 display: none; 隐藏您不需要的 select 元素。假设您只需要年份下拉菜单，您可以隐藏月份和日期下拉菜单。我在这里创建了一个可运行的 sn-p 示例：

AUI().use('aui-datepicker', function (A) {
    var datePicker = new A.DatePickerSelect({
        dayNode: '#day',
        monthNode: '#month',
        yearNode: '#year',
        calendar: {
            dateFormat: '%m/%d/%Y'
        },
        render: true
    });

    // Working around the fact that the calendar does not get updated
    // when a new year is selected:
    var yearNode = A.one('#year');
    yearNode.on('change', function(event) {
        datePicker.calendar.set('currentYear', yearNode.get('value'));
        var date = datePicker.calendar.date;
        datePicker.calendar.clear();
        datePicker.calendar.date = date;
    });
});

<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">

<div id="datePicker">
    <select id="month" style="display: none;">
        <option></option>
    </select>
    <select id="day" style="display: none;">
        <option></option>
    </select>
    <select id="year">
        <option></option>
    </select>
</div>

【讨论】：

【解决方案2】：

AUI 元素：

 <aui:input name="dateOfBirth" cssClass="dob" id="dateOfBirth" title="Date Of Birth" placeholder="dd/mm/yyyy" readonly="true" >

脚本：

$(".dob").datepicker({ dateFormat: "dd/mm/yy",minDate: new Date(), changeYear: true,changeMonth: true,yearRange: "-0:+10y", onClose: function(date, datepicker) {$(".dob").focus(); }});

【讨论】：