CODEWITHSUNDEEP
angularangular-materialdatepicker
Ap0piec
Ap0piec

Reputation: 58

How to remove the focus from today's date in Angular Material Datepicker?

Is it possible to remove the focus on today's date when using Angular Material datepicker? I have tried adding the following properties to mat-datepicker but nothing seems to work and I can't find a way to do this:

    <mat-form-field appearance="fill">
       <mat-label>Choose a date</mat-label>
       <input matInput [matDatepicker]="picker">
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
       <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

For example, I don't want the focus/background on 16 in the image below.

Angular material datepicker

I need to do this because I am trying to use Angular Material datepicker for the users to enter their date of birth and the focus on today's date is irrelevant in this case.

Upvotes: 3

Views: 3283

Answers (2)

vikingsteve
vikingsteve

Reputation: 40408

The solution is to use startView="multi-year" in the mat-datepicker.

<mat-datepicker startView="multi-year" #picker></mat-datepicker>

If you like to refer to the documentation, it's here:

https://material.angular.io/components/datepicker/overview

Upvotes: 0

GRD
GRD

Reputation: 206

apply This class inside style.css file of your project and re run project again.. Basically you need to change default css class implementation.

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  background-color: rgb(255 255 255) !important;
  border: none !important;
 }

Upvotes: 1

Related Questions