Question

我的html中有这段代码：

<mat-form-field>
    <input matInput [matDatepicker]="myDatepicker" placeholder="Choose a date" [(ngModel)]="model.value" name="value">
    <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

通过这种方式，我可以使用以下格式获取日期：YYY-MM-DDThh:mm:ss:millisZ。
使用matDatepicker我可以选择日期，但我也需要在选择日期后选择时间。
是否可以仅使用matDatepicker达到此结果？
谢谢

Answer 1

否，到目前为止，无法从<DataGrid Grid.Row="0" Margin="10 10 10 0" ItemsSource="{Binding List}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTemplateColumn Header="ID"> <DataGridTemplateColumn.HeaderStyle> <Style TargetType="DataGridColumnHeader"> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </DataGridTemplateColumn.HeaderStyle> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Label Content="{Binding Path=Id}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> //... //Same for other columns //... </DataGrid>中选择time。关于此功能，github上尚有一个未解决的问题。

问题线程摘要：

或者，您可以使用以下任一选项将matDatePicker用于您的项目。

MaterialTimeControl-具有角材料，CDK和Flex布局的材料设计
amazing-time-picker-不是使用Angular Material构建的，而是与Angular Material兼容的
date-time-picker-不是完全的Material Design，而是使用CDK构建的

Answer 2

如果您想要一个简单的解决方案，则可以使用 type="time" 。 Safari和IE需要polyfill，

示例：

<mat-form-field>
  <input matInput type="time" class="bg-none" formControlName="_time" placeholder="Time">
</mat-form-field>

您必须执行以下操作才能填充Angular应用

npm i time-input-polyfill

将以下行添加到APPLICATION IMPORTS

下的 polyfill.ts

import 'time-input-polyfill';

Answer 3

这是我的component.html代码

      <mat-form-field>
          <input matInput ngModel name="dateofbirth" [matDatepicker]="dateofbirth" #dateofbirth="ngModel" placeholder="Choose your Birth Date" required dateofbirth>
          <mat-datepicker-toggle matSuffix [for]="dateofbirth"></mat-datepicker-toggle>
          <mat-datepicker  #dateofbirth startView="year" [startAt]="startDate"></mat-datepicker>
        </mat-form-field>

这是我的component.ts代码

onSignup(form: NgForm)
 {
    if (form.invalid) {
      return;
    }

    this.authService.createUser(
      this.id,
      form.value.dateofbirth);

      console.log(form.value.dateofbirth)
  }

希望它对您有帮助...就像对我一样谢谢！！！

Angular 6资料：如何从matDatepicker获取日期和时间？

3 个答案: