应用自定义css </p：calendar>后，<p：calendar>的按钮图标消失了

Question

在我的应用程序中，我使用的是<p:calendar showOn="button".......>，我借助以下链接在此日历上应用自定义css：Bluefoot-CustomCss-Primefaces-Calendar。应用此自定义css后，除日历图标变为...外，一切正常。但我想展示calendar图标。这怎么可能 ？我附上了图片以便更好地理解我的问题。

我的案例html DOM树的另一件事看起来像<button class="ui-datepicker-trigger" type="button">...</button>，默认情况下应该是

<button class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="button" role="button" aria-disabled="false">
   <span class="ui-icon ui-icon-calendar"></span>
   <span class="ui-button-text">ui-button</span>
</button>

我不知道如何解决这个问题。任何建议都非常感谢。谢谢， ！。

编辑：1 我在每个日期显示之前调用这个js方法：

function applyCustomCssOnCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave) {
$(".hasDatepicker").datepicker("option", "beforeShowDay",
        function(date) {

            return highlightCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString,
                    rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave, date);
        })
  };

applyCustomCssOnCalendar（isAccessable，isAdmin，publicHolidaysAsString，paidLeavesAsString，rttLeavesAsString，specialLeavesAsString，pendingLeavesAsString，pendingLabel，paidLeave）方法定义为：

function highlightCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave, datee) {
var date = new Date(datee);
date.setHours(0, 0, 0, 0);
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
var day = date.getDay();

var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);

console.log(publicHolidaysAsString);

if (day == 6 || day == 0) {
    return [true,'ui-datepicker-unselectable',''];
}   

for ( var i = 0; i < publicHolidaysAsString.length; i = i + 2) {
    if ((y + '-' + m + '-' + d) == publicHolidaysAsString[i]) {
        return [true,'highlight-calendar-publicHoliday ui-datepicker-unselectable',publicHolidaysAsString[i + 1]];
    }
}
}

Answer 1

将您的代码更新为：

function applyCustomCssOnCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString, rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave) {
    $(".hasDatepicker").datepicker("option", "beforeShowDay",
        function(date) {
            return highlightCalendar(isAccessable, isAdmin, publicHolidaysAsString, paidLeavesAsString,
                    rttLeavesAsString, specialLeavesAsString, pendingLeavesAsString, pendingLabel, paidLeave, date);
    }).siblings(".ui-datepicker-trigger:button").html("").addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only").append('<span class="ui-button-icon-left ui-icon ui-icon-calendar"></span><span class="ui-button-text">ui-button</span>');
};

它应该工作。由于您自己致电beforeShowDay，因此Primefaces的默认beforeShowDay不适用于您的情况，这就是您无法看到<span/>的原因。上述代码将添加<span/>作为Primefaces。