Question

我正在使用sap.m.DatePicker，我想更改某些月份的颜色（月份项目的背景颜色）。

我试图更改sapUiCalItem文件中style.css的背景颜色。我将此类添加到了我的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:"Red", 6:"Green", 11: "yellow"};。其中0-一月，1-二月... 11-十二月。根据您的要求修改此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
                    }
                });
            }
        }           
    }
}

输出

如何在sap.m.DatePicker中为月份着色？

1 个答案: