Question

Primefaces中的p：calendar组件是否支持对年份下拉列表进行排序？默认情况下，它按升序排序，但如果我想通过降序排序呢？我试图通过使用javascript来实现它，但不幸的是，在我在下拉列表中选择了一个选项后，排序已经消失。

Answer 1

您可以使用yearrange属性。但是你需要改变/覆盖某些东西以使其有效。我看到使用datepicker和datepicker的Primefaces日历只支持yearrange升序。所以我认为你可以这样做。

 <p:calendar yearrange="2027:2017"... />

覆盖datapicker可以支持新年度的东西，比如（只是我的简短样本）

$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
secondary, monthNames, monthNamesShort) {

var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
    changeMonth = this._get(inst, "changeMonth"),
    changeYear = this._get(inst, "changeYear"),
    showMonthAfterYear = this._get(inst, "showMonthAfterYear"),
    html = "<div class='ui-datepicker-title'>",
    monthHtml = "";

// month selection
if (secondary || !changeMonth) {
    monthHtml += "<span class='ui-datepicker-month'>" + monthNames[drawMonth] + "</span>";
} else {
    inMinYear = (minDate && minDate.getFullYear() === drawYear);
    inMaxYear = (maxDate && maxDate.getFullYear() === drawYear);
    monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>";
    for (month = 0; month < 12; month++) {
        if ((!inMinYear || month >= minDate.getMonth()) && (!inMaxYear || month <= maxDate.getMonth())) {
            monthHtml += "<option value='" + month + "'" +
                (month === drawMonth ? " selected='selected'" : "") +
                ">" + monthNamesShort[month] + "</option>";
        }
    }
    monthHtml += "</select>";
}

if (!showMonthAfterYear) {
    html += monthHtml + (secondary || !(changeMonth && changeYear) ? "&#xa0;" : "");
}

// year selection
if (!inst.yearshtml) {
    inst.yearshtml = "";
    if (secondary || !changeYear) {
        html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
    } else {
        // determine range of years to display
        years = this._get(inst, "yearRange").split(":");
        thisYear = new Date().getFullYear();
        determineYear = function(value) {
            var year = (value.match(/c[+\-].*/) ? drawYear + parseInt(value.substring(1), 10) :
                (value.match(/[+\-].*/) ? thisYear + parseInt(value, 10) :
                    parseInt(value, 10)));
            return (isNaN(year) ? thisYear : year);
        };
        year = determineYear(years[0]);
        endYear = Math.max(year, determineYear(years[1] || ""));
        year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
        endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
        inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";

        var startYear = determineYear(years[0]);
        var absoluteEndYear = determineYear(years[1]);

        if (startYear <= absoluteEndYear) {
            for (; year <= endYear; year++) {
                inst.yearshtml += "<option value='" + year + "'" +
                    (year === drawYear ? " selected='selected'" : "") +
                    ">" + year + "</option>";
            }
        } else {
            for (; startYear >= absoluteEndYear; startYear--) {
                inst.yearshtml += "<option value='" + startYear + "'" +
                    (startYear === drawYear ? " selected='selected'" : "") +
                    ">" + startYear + "</option>";
            }
        }
        inst.yearshtml += "</select>";

        html += inst.yearshtml;
        inst.yearshtml = null;
    }
}

html += this._get(inst, "yearSuffix");
if (showMonthAfterYear) {
    html += (secondary || !(changeMonth && changeYear) ? "&#xa0;" : "") + monthHtml;
}
html += "</div>";
return html;}

或者您可以编写或扩展更多p：calendar组件。

希望有所帮助。

Primefaces如何对年份下拉列表p：日历组件进行排序

1 个答案: