CODEWITHSUNDEEP
htmlcssangulardatepickerangular-material
Sam Andreatta
Sam Andreatta

Reputation: 193

How to move calendar icon to the inside of the input? Angular Material

I'm new to Angular Material and I'm building a datepicker. I need to move the icon from outside of the input field to inside. I tried importing some Material themes and I haven't found one that has this style, does anyone know how to do this? This is my html:

<input matInput formControlName="startDate" [matDatepicker]="basicDatepicker" (click)="basicDatepicker.open()" >
<mat-datepicker-toggle matSuffix [for]="basicDatepicker"></mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>

Above is how I want the calendar to look, below is how it looks now

Upvotes: 1

Views: 4609

Answers (3)

Sam Andreatta
Sam Andreatta

Reputation: 193

Thank you guys! I used this:

<mat-form-field appearance="outline">

And customized the classes as suggested using ::ng-deep

Upvotes: 0

William Silveira
William Silveira

Reputation: 68

You can use css to do this set the icon to be hidden, and place an icon of your own source outside the calendar.

inspect the icon class and set his visibility with something like this

::ng-deep .targetClass {
    visibility: hidden;
}

You need to use ng-deep to get classes deep-in angular components

I suggest wrapping the calendar with another class, so your CSS only affects the target calendar

Like this:

.wrapperClass ::ng-deep .targetClass {
  visibility: hidden;
}

Upvotes: 1

gmotzespina
gmotzespina

Reputation: 151

To make it look like the actual material one your code should look like 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>

You can see more details and other kind of implementations on the docs: https://material.angular.io/components/datepicker/overview

Upvotes: 2

Related Questions