css - 如何在 sap.m.DatePicker 中给月份上色？

Question

我正在使用 sap.m.DatePicker，我想改变一些月份的颜色(月份元素的背景颜色)。

我试图在 style.css 文件中更改 sapUiCalItem 的背景颜色。我将此类添加到我的 CSS 文件中，但这会更改我拥有的所有 datePicekers 的颜色。

.sapUiCalItem{
  background-color: #920000;
}

然后我将类添加到我的 DatePicker

<m:DatePicker
  id="datePickerId"
  class="datePickerClass"
  value="{period}"
  valueFormat="YYYY-MM-DD"
  displayFormat="MMMM yyyy"
  change="onChangeDate"/>

并像这样更改了 CSS

.datePickerClass.sapUiCalItem{
  background-color: #920000 !important;
}

另外，我试过这样添加类

self.getView().byId("datePickerId").addStyleClass("datePickerClass");

但这也没有用。 sap.m.DatePicker 中这几个月有什么着色方法吗？

Answer 1

您可以通过将事件附加到月份按钮 attachPressButton1 来实现它。打开月份布局后，相应的月份将突出显示。

假设你知道有色人种的月份var oMonths = { 0:"红色", 6:"绿色", 11: "黄色"};。其中 0 - Jan，1 - Feb... 11 - Dec。根据您的要求修改此 oMonths 对象和相应的月​​份颜色。

view.XML

<DatePicker id="dpColoufulMonths" placeholder="Enter Date ..."/>

Controller.js

var oDP = this.byId("dpColoufulMonths");
if (oDP) {          
    oDP._openPopup = function() {
        if (!this._oPopup) {
            return;
        }
        this._oPopup.setAutoCloseAreas([this.getDomRef()]);
        var k = sap.ui.core.Popup.Dock;
        var A;
        if (this.getTextAlign() == sap.ui.core.TextAlign.End) {
            A = k.EndBottom + '-4';
            this._oPopup.open(0, k.EndTop, A, this, null, 'fit', true);
        } else {
            A = k.BeginBottom + '-4';
            this._oPopup.open(0, k.BeginTop, A, this, null, 'fit', true);
        }
        //Custom implementation for color update
        var oDatePopup = this._oPopup.getContent();
        if (oDatePopup) {
            var oDatePopupHdr = this._oPopup.getContent().mAggregations.header;
            var oMonths = { 0:"Red", 6:"Green", 11: "yellow"};
            if (oDatePopupHdr) {
                oDatePopupHdr.attachPressButton1(function(oEvent) { //Month textButton
                    for (var m in oMonths) {
                        var sMonthID = "#" + oDatePopup.mAggregations.monthPicker.sId + "-m" + m;
                        jQuery(sMonthID).css({"background-color" : oMonths[m]}); //inline styling 
                        //jQuery(sMonthID).addClass("month"+oMonths[m]);// Adding the style class and styled it in CSS file
                    }
                });
            }
        }           
    }
}

输出