Material 输入类型 datetime-local 显示其自己的占位符和切换按钮

Question

我正在尝试呈现 angular material 日期选择器。哪个不是问题(DEMO)

<mat-form-field class="example-full-width">
    <input
        matInput
       [matDatepickerFilter]="myFilter"
       [matDatepicker]="picker"
       placeholder="Choose a date"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

但就我而言，我需要一个日期时间选择器。根据我在网上找到的内容，您只需添加

 type="datetime-local"

到输入字段。我可以确认这有效，但它对输入字段做了奇怪的事情。

DEMO

尽管 angular material 似乎支持 this type 但是您得到的选择器是原生的。

它有自己的切换按钮并显示默认文本 dd/mm/yyyy --:--。有没有办法隐藏此文本和切换按钮？

Answer 1

Angular material 目前不支持时间选择器，但有一个未解决的问题要求：https://github.com/angular/components/issues/5648

您可以尝试使用日期和时间选择器的第 3 方扩展，直到它被添加到 Angular material：https://ng-matero.github.io/extensions/components/datetimepicker/overview

Answer 2

我没有在 Angular Material 中找到 time-picker 功能。

试试这个 - https://www.npmjs.com/package/@angular-material-components/datetime-picker

Answer 3

只需跳过切换行和 [matDatepicker] 指令：

<mat-form-field>
    <input matInput
    required
    formControlName = "start"
    type="datetime-local"
    placeholder="Data Lezione"
    >
    <mat-datepicker></mat-datepicker>
</mat-form-field>

这对我有用，坦率地说，我不明白输入和日期选择器是如何相互连接的：可能只是因为它们在同一个 mat-form-field 中。但它有效！唯一的问题是您无法禁用特定的日期或时间，因为您没有对输入中的切换的引用，因此 [matDatepickerFilter]="myFilter" 不起作用...

Material 输入类型 datetime-local 显示其自己的占位符和切换按钮

Material input type datetime-local shows its own placeholder and toggle button

angular-material

angular

angular-material-datetimepicker