aui date picker, calendar with maximumDate attribute

Question

when I set aui datepicker with calendar maximumDate attribute, It was not getting selected properly sometimes (it's kind of weird though). Till noon it was working, later it was not.

I am using Liferay 6.2 EE SP8. Using hook I am trying to change html\taglib\ui\input_date\page.jsp

<%
Calendar calendarCurrentDate = CalendarFactoryUtil.getCalendar();
%>
<%
                        if((PortalUtil.getPortletNamespace(PortletKeys.JOURNAL)).equals(namespace) && name.equals("expirationDate")){                           
                    %>
                    calendar: {
                        maximumDate: new Date(<%= calendarCurrentDate.get(Calendar.YEAR)+1 %>, <%= calendarCurrentDate.get(Calendar.MONTH) %>, <%= calendarCurrentDate.get(Calendar.DAY_OF_MONTH) %>)
                    },
                    <%
                        }
                    %>

Full datepicker code below

<aui:script use='<%= "aui-datepicker" + (BrowserSnifferUtil.isMobile(request) ? "-native" : StringPool.BLANK) %>'>
Liferay.component(
    '<%= nameId %>DatePicker',
    function() {
        var datePicker = new A.DatePicker<%= BrowserSnifferUtil.isMobile(request) ? "Native" : StringPool.BLANK %>(
            {
                container: '#<%= randomNamespace %>displayDate',
                mask: '<%= mask %>',                    
                <%
                    if((PortalUtil.getPortletNamespace(PortletKeys.JOURNAL)).equals(namespace) && name.equals("expirationDate")){                           
                %>
                calendar: {
                    maximumDate: new Date(<%= calendarCurrentDate.get(Calendar.YEAR)+1 %>, <%= calendarCurrentDate.get(Calendar.MONTH) %>, <%= calendarCurrentDate.get(Calendar.DAY_OF_MONTH) %>)
                },
                <%
                    }
                %>                  
                on: {
                    disabledChange: function(event) {
                        var instance = this;

                        var container = instance.get('container');

                        var newVal = event.newVal;
                        console.log('disalbedChange'+newVal)
                        container.one('#<%= dayParamId %>').attr('disabled', newVal);
                        container.one('#<%= monthParamId %>').attr('disabled', newVal);
                        container.one('#<%= nameId %>').attr('disabled', newVal);
                        container.one('#<%= yearParamId %>').attr('disabled', newVal);
                    },
                    selectionChange: function(event) {
                        var instance = this;

                        var container = instance.get('container');

                        var date = event.newSelection[0];
                        console.log("event >"+event);
                        console.log("date >"+date);
                        if (date) {
                            container.one('#<%= dayParamId %>').val(date.getDate());
                            container.one('#<%= monthParamId %>').val(date.getMonth());
                            container.one('#<%= yearParamId %>').val(date.getFullYear());
                        }
                    }
                },
                popover: {
                    zIndex: Liferay.zIndex.TOOLTIP
                },                  
                trigger: '#<%= nameId %>'
            }
        );

        datePicker.getDate = function() {
            var instance = this;

            var container = instance.get('container');

            return new Date(container.one('#<%= yearParamId %>').val(), container.one('#<%= monthParamId %>').val(), container.one('#<%= dayParamId %>').val());
        };

        return datePicker;
    }
);

Liferay.component('<%= nameId %>DatePicker');

Any help much appreciated. Is it anything related to timezone.

Try to select max date as date, next when you click in input box - input value becomes blank. This will not be the case if we select other dates prior to max date. Max date is one year from current date

JS fiddle

http://jsfiddle.net/uasvug1h/1/(alloy 3 it was working)

http://jsfiddle.net/btnkumar/uasvug1h/2/(alloy 2 it was not working)

How to make this work in alloy 2

Answer 1

This is a bug in AlloyUI 2.0.x. It has now been fixed in 3.0.x and 2.0.x, specifically the 2.0.0.62-deprecated release. Currently, there are no known workarounds.