DatePicker: month/year navigator isn't updated correctly when using LazyDateMetadataModel

Describe the defect When using a DatePicker with month/year navigator, combined with a model (eg. for disabling days), the month/year selected values are reverted to the first elements in the lists. Eg. current year is 2021, the list is populated 10 years before and after the current year (2011-2031). The selected year will display as 2011, but internally, 2021 is still used, which is correct. Same things happens for the month selector. The days however are displayed correctly (correct month and year, including the state applied by the model). When using mindate and maxdate instead of the model, it is working correctly.

Environment:

• PF Version: 10.0
• JSF + version: Mojarra 2.3.9.SP09
• Affected browsers: ALL (I could reproduce this with Chrome, Firefox and Edge, all updated to latest version. Haven’t tested it with other browsers)

To Reproduce Steps to reproduce the behavior:

1. Create a DatePicker with month and/or year navigator, using a LazyDateMetadataModel
2. Open the datepicker popup by clicking on the input field.
3. selected another month, either by selecting it from the navigator selection lists, or by using the navigation buttons to go to the next or previous month.
4. The DatePicker popup will be updated, the dates will be correctly displayed, but the month/year navigator will be resetted to the first selectable element in the list.

Expected behavior The month/year navigator should not be resetted to the first selectable element in the list, but should contain the currently selected month/year.

Example XHTML

<p:datePicker model="#{bean.modelLazy}" monthNavigator="true" yearNavigator="true"/>

Example Bean

LazyDateMetadataModel modelLazy = new LazyDateMetadataModel() {
    @Override
    public void loadDateMetadata(LocalDate start, LocalDate end) {
        add(start.plusDays(start.getMonthValue() + 2), DefaultDateMetadata.builder().disabled(true).build());
   }
};

[pmensalt]

@Melloware I confirm the patch works! Thanks for the very fast fix for this problem!

[melloware]

@pmensalt I believe this MonkeyPatch will work if you want to try it right now…

if ($.prime.datePicker) {
    $.prime.datePicker.prototype.renderTitleMonthElement = function(month, index) {
        if (this.options.monthNavigator && this.options.view !== 'month' && index === 0) {
            return '<select class="ui-datepicker-month">' + this.renderTitleOptions('month', this.options.locale.monthNamesShort, month) + '</select>';
        } else {
            return '<span class="ui-datepicker-month">' + this.escapeHTML(this.options.locale.monthNames[month]) + '</span>' + '&#xa0;';
        }
    };

    $.prime.datePicker.prototype.renderTitleYearElement = function(year, index) {
        if (this.options.yearNavigator && index === 0) {
            this.updateYearNavigator();
            var yearOptions = [],
                years = this.options.yearRange.split(':'),
                yearStart = parseInt(years[0], 10),
                yearEnd = parseInt(years[1], 10);

            for (var i = yearStart; i <= yearEnd; i++) {
                yearOptions.push(i);
            }

            return '<select class="ui-datepicker-year">' + this.renderTitleOptions('year', yearOptions, year) + '</select>';
        } else {
            return '<span class="ui-datepicker-year">' + year + '</span>';
        }
    };

    $.prime.datePicker.prototype.renderTitleOptions = function(name, options, current) {
        var _options = '',
            minDate = this.options.minDate,
            maxDate = this.options.maxDate;

        for (var i = 0; i < options.length; i++) {
            switch (name) {
                case 'month':
                    if ((!this.isInMinYear() || i >= minDate.getMonth()) && (!this.isInMaxYear() || i <= maxDate.getMonth())) {
                        _options += '<option value="' + i + '"' + (i === current ? ' selected' : '') + '>' + this.escapeHTML(options[i]) + '</option>';
                    }
                    break;
                case 'year':
                    var option = options[i];
                    if (!(minDate && minDate.getFullYear() > option) && !(maxDate && maxDate.getFullYear() < option)) {
                        _options += '<option value="' + option + '"' + (option === current ? ' selected' : '') + '>' + option + '</option>';
                    }
                    break;
            }
        }

        return _options;
    }
}