<p:calendar> 的按钮图标在应用自定义 css 后消失了答案

【问题标题】：<p:calendar>'s button icon disappeared after applying custom css<p:calendar> 的按钮图标在应用自定义 css 后消失了
【发布时间】：2013-12-23 12:57:48
【问题描述】：

在我的应用程序中，我使用 <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]];
    }
}
}

【问题讨论】：

创建小提琴，会帮助你
你能告诉我们你在做什么吗？
@TapasBose 我已经编辑了我的代码。
@AmitAgrawal OP 的问题与 Primefaces 有关。

标签： jquery primefaces calendar

【解决方案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/> 的原因。上述代码将像 Primefaces 一样添加<span/>。

【讨论】：