How to change the angular-material datepicker current date color

Question

I want to change the color of the current date in angular-material if that day is disabled since I have made a function that disables 2 days from now.

Example if today is 8-24-16 the datepicker disables 8-24-16 (today) and 8-25-16 (tomorrow), so I want to change the color that displays the current date if the date is disabled. Because when the current date disabled it shows the current date 8-24-16 (today) in a very light blue that is hard to see so I want to change that color to a different color that highlights more.

I tried looking at the css of angular-material but I couldn't find anything related to the css color of a disabled current date or a normal not disabled current date. I don't mind changing the color of both the normal current date and the disable current date. Also, my function that disabled the days sets the date from to days from now I don't know if this affects something.

Here is my code

<div class="form-group">
    <label>Delivery Date:</label>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date"
        md-max-date="maxDate"
        md-min-date="minDate"
        md-date-filter="disabledWeekends"
        ng-disabled="disabled">
    </md-datepicker>
</div>

My Controller

//adding two days
   $scope.maxDate = new Date(
        $scope.myDate.getFullYear(),
        $scope.myDate.getMonth(),
        $scope.myDate.getDate() + 2);

    $scope.minDate = new Date(
        $scope.myDate.getFullYear(),
        $scope.myDate.getMonth(),
        $scope.myDate.getDate() + 2);


    $scope.myDate = $scope.minDate;


 $scope.disabledWeekends = function (date) {
        var day = date.getDay();
            return day === 1 || day === 2 || day === 3
                    || day === 4 || day === 5;
        };

Hey bill it'll be really tough to figure it out like can you give us fiddle link or anything else? You can share any already available link as well. — Gandalf the White
that's the thing I don't know too much about CSS so I don't know where to start I looked at the angular-material css but I couldn't find anything like current-date-color or anything like that , I could create a css class but how can I know the name of that specific element. — Bill_Data23
That is why we need to look at the working code to determine the element which is causing the problem. Open the code in the chrome browser and press ctrl+shift+i then select the element you want to change and check which css class is affecting it. — Gandalf the White

frkcn frkcn · Accepted Answer · 2016-08-24T12:46:57

You can add new class for disable date's html tags eg: class="disableDates" and define color for this class in your css file.

How to change the angular-material datepicker current date color

1 Answers