如何更改 Angular Material 日期选择器的水平大小？

Question

这是我要设置自定义水平尺寸的日期选择器： https://material.angularjs.org/1.0.5/demo/datepicker

Answer 1

不确定这是否是您的意思，但是要设置日期选择器输入的水平大小，您可以覆盖 css class，如下所示

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

Answer 2

这对我有用 Angular Material 6

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

Answer 3

我可以通过将显示设置为阻塞 mat-form-field 来解决这个问题。我有其他表单控件，我试图匹配宽度，所以这个解决方案对我有用。可能对其他人有用。

在HTML中：

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

在css中：

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