How to change horizontal size of Angular Material datepicker?

Question

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

Answer 1

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

Answer 2

This works for me in Angular Material 6

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

Answer 3

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