Angular Material DatePicker 允许字符串值

编程问答 2022-05-30

问题描述

我正在尝试保留 Angular Material Date 选择器输入框并输入 DD/MMM/YYYY 或 MMM/YYYY 或（任何字符串值）要求用户单击按钮获取（任何字符串值）并分配日期选择器输入框

HTML

<a mat-flat-button (click)="Datepiker()">s</a>
  </mat-icon>
  <input matInput
         placeholder="Course Completion" 
         formControlName="Completion" maxlength="60"
         #courseCompte
         (click)="course.open()"
         [matDatepicker]="course"
         (keyup)="Compte.value =Compte.value.toupperCase()"/>
  <mat-datepicker #course></mat-datepicker>

Ts

Datepiker() { 
 this.mainForm.get(this.formgroupName).get('Completion').setValue("Provide");
}

解决方法

我想出的只有一种方法可以实现您想要的（我认为），如下所示：

您将组件的元素引用注入为：

constructor(private elemRef: ElementRef){}

并使用它来获取 mat 试图从您那里抽象出的本机输入，一旦您拥有该元素，您就可以将其设置为您想要的任何输入。

例如，您可以通过以下方式将其值设置为“已提供”：

 let inputElement = this.elemRef.nativeElement.querySelector('.mat-input-element.mat-datepicker-input');
 inputElement.value = 'is provided';

自然，上面的代码可以用在你的 onClick 方法中，改变元素的值，就像这里：https://stackblitz.com/edit/angular-pfaxp1-fasyhy?file=src/app/datepicker-overview-example.ts

话虽这么说，我发现这个解决方案非常丑陋和黑客行为，除非我绝对别无选择，否则我真的不想使用这样的东西。

还要注意的是，如果直接在字段中注入一个值，则材质字段不会显示任何动画，因为动画是由焦点触发的，因此除非您聚焦元素并等待动画播放，否则您将无法获得漂亮的动画完成，如您所见：https://stackblitz.com/edit/angular-pfaxp1-srcvv3?file=src/app/datepicker-overview-example.ts

总而言之，这是一个非常糟糕的解决方案，但我认为 Material 不允许你干净利落地做你想做的事。 我建议你重新考虑你的设计并尝试一个替代的和干净的解决方案，如果不可能的话，我希望我给你一些关于如何以某种方式前进的想法:)

angularangularangular-date-formatangular-materialdatepickerdatepicker