CODEWITHSUNDEEP
angular-material
andreshg112
andreshg112

Reputation: 722

How to change horizontal size of Angular Material datepicker?

This is the datepicker that I want to set my custom horizontal size: https://material.angularjs.org/1.0.5/demo/datepicker

Upvotes: 5

Views: 22172

Answers (5)

Naishar Shah
Naishar Shah

Reputation: 35

With Angular Material 15, I needed !important in order it to work

::ng-deep {
  .mat-datepicker-content .mat-calendar  {
    width: YOUR_WIDTH !important;
    height: YOUR_HEIGHT !important;
  }
}

Upvotes: 1

SYED TOUSIF
SYED TOUSIF

Reputation: 81

Update below CSS class for the page or globally, this will help to reduce the icon line-height and height so we can reduce the height of the datetime picker.

.mat-icon-button {
    padding: 0;
    min-width: 0;
    width: 40px;
    height: 16px;
    flex-shrink: 0;
    line-height: 12px;
    border-radius: 50%;
}

Upvotes: 1

user
user

Reputation: 192

I was able to solve this by setting the display to block on the mat-form-field. I have other form controls which I'm trying to have matching width's so this solution worked for me. Might work for someone else.

In HTML:

<mat-form-field class="display-block">
    <...date picker and other form elements...>
</mat-form-field>

In css:

.mat-form-field.display-block {
    display: block;
}

Upvotes: 1

kanagaraj palanisamy
kanagaraj palanisamy

Reputation: 397

This works for me in Angular Material 6

.mat-datepicker-content .mat-calendar
{ 
     zoom: 0.85;
}

Upvotes: 7

j3ff
j3ff

Reputation: 6089

Not sure if this is what you mean but to set the horizontal size of the input of the date picker you can override css class as follow

.md-datepicker-input-container {
    width: 300px;
}

Upvotes: 4

Related Questions