CODEWITHSUNDEEP
cssdatepickersapui5
hrrs
hrrs

Reputation: 68

How to color months in sap.m.DatePicker?

I am using sap.m.DatePicker, I want to change color of some months (background color of month item).

enter image description here

I tried to change background color of sapUiCalItem in style.css file. I added this class to my CSS file but this changes the colors of all datePicekers that I have. 

.sapUiCalItem{
  background-color: #920000;
}

Then I added class to my DatePicker

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

and changed CSS like this

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

also, I tried to add class like this

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

But that didn't work either. Is there any way of coloring this months in sap.m.DatePicker ?

Upvotes: 1

Views: 777

Answers (1)

Inizio
Inizio

Reputation: 2256

You can achieve it by attaching the event to the month button attachPressButton1. Once the month layout is opened, the corresponding months will be highlighted.

Assuming you know the months to the colored like var oMonths = { 0:"Red", 6:"Green", 11: "yellow"};. Where 0 - Jan, 1 - Feb... 11 - Dec. Modify this oMonths object and the corresponding month color as per your requirement.

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
                    }
                });
            }
        }           
    }
}

Output

enter image description here

Upvotes: 1

Related Questions