AUI datepicker error and workaround

Question

I am checking the Liferay Site for Alloy UI date picker.

The problem in the given example is that there is no select option. If the DOB of my user is in 70's then the user has to click back button multiple times.

aui datepicker from above link

This is not a happy scenario for the user. How can I edit my AUI javascript to something like month and year option given by jquery here

you can use jquery datepicker – Poonam Feb 15 '12 at 13:25 — Poonam, Feb 15 '12 at 13:25
@Poonam i can but i may not. i just have to use AUI – Some Java Guy Feb 15 '12 at 14:43 — Some Java Guy, Feb 15 '12 at 14:43

score 0 · Answer 1 · answered Jan 30 '15 at 20:03

I'm assuming that you are using AlloyUI 1.5 here, and so I would recommend using the DatePickerSelect component but hiding the select elements that you don't need with display: none;. Assuming that you only want a year dropdown, you could hide both the month and day dropdowns. I've created a runnable snippet example here:

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>

score 0 · Answer 2 · answered Mar 12 '20 at 07:17

AUI Element:

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

Script:

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

AUI datepicker error and workaround

2 Answers2