使用角度 5 设置角度材料 datePicker 的默认值

Posted 2023-03-13

【中文标题】使用角度 5 设置角度材料 datePicker 的默认值

【英文标题】：Set default value for angular material datePicker with angular 5

【发布时间】：2019-03-18 20:53:08

【问题描述】：

我正在使用角度材料的日期选择器。我想设置一个默认值，但它没有显示该值。

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
   <input matInput [picker]="picker" placeholder="Date"
                  autocomplete="off"
                  name="date" 
                  formControlName="date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker  [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>

这是我想要设置为默认值的 .js 代码

var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); 

this.form = this.formBuilder.group(
        dataInicial: [data_inicial],
                   ...

【问题讨论】：

是否要将当前日期设置为默认日期？

这个 3888000000 代表什么？

【参考方案1】：

这是我的答案，

在你的 .html 中

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在您的 .ts 中

this.form = this.formBuilder.group(
   date: new FormControl(new Date()), // Current Date
               ...
);

这会将当前日期设置为默认日期。

【讨论】：

这样工作：new FormControl(new Date()) |但是，如果我将其用作 --> new FormControl(value: new Date(), [Validators.required])

则不起作用

【参考方案2】：

您需要为 startAt 更改提供一个 Date 对象，如下所示：

在 .ts 中：

date = new Date((new Date().getTime() - 3888000000));

在html中：

<mat-datepicker  [startAt]="date" #picker></mat-datepicker>

这里有一个工作演示：https://stackblitz.com/edit/angular-n9yojx

【讨论】：

嗨！感谢您的回答，但它仍然没有显示：/

@AlexLungu 不确定你的情况。你检查了演示 stackblitz 吗？它有效！

你是对的。我误解了这个问题。我正在寻找更像 [min] 的东西。如日历“startsAt”中的特定日期。但这不是它的工作方式。很抱歉造成误会

@AlexLungu 没关系。如果您仍然遇到问题，请发布新问题。

【参考方案3】：

这对我有用！

HTML-

<mat-form-field>
    <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker  #picker1></mat-datepicker>
</mat-form-field>

TS-

date1 = new FormControl(new Date())

【讨论】：

这是最好的办法

【参考方案4】：

您可以使用在您的输入中定义的 formControl。

这里是html

<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
    <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这里是 TS 声明你是formControl

date: FormControl;
this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>))

【讨论】：

在使用 formControl 时，您必须将 ReactiveFormsModule 导入到您的 imports 数组中。

【参考方案5】：

在您的 .html 中----

     <mat-form-field style="width:150px;"  color="accent">
            <mat-label>Choose From Date</mat-label>
            <input  class="example-events" matInput [matDatepicker]="picker1"  [ngModel]="dateF" >
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1 ></mat-datepicker>
     </mat-form-field>

在您的 .ts 中----

dateF:any=new Date();

【参考方案6】：

下面是使用 Angular 10、Angular Material 10 和 Reactive forms 的工作代码

组件.ts

      this.youForm= this._formBuilder.group(


        StartDate: [new Date(), Validators.required],

      );

component.html 没有变化

  <mat-form-field appearance="outline">
            <input matInput [matDatepicker]="StartDate" placeholder="Start date *" 
              formControlName="StartDate">
            <mat-label>Start Date *</mat-label>
            <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
            <mat-datepicker #StartDate></mat-datepicker>
          </mat-form-field>

【参考方案7】：

在一组表单控制器中，您可以使用如下所示的默认日期。

 birthdayCtrl: ['1999-01-31']

【参考方案8】：

使用模板驱动的方法，解决方案如下。

 selectedDate = new Date();

<input class="form-control"
                     matInput
                     [matDatepicker]="dp3"
                     [min]="today"
                     [max]="max"
                     disabled
                     [(ngModel)]="selectedDate"
                     (ngModelChange)="dateUpdated()"
                     name="currentDate"
                   />
                   <mat-datepicker-toggle
                     matSuffix
                     [for]="dp3"
                   ></mat-datepicker-toggle>
                   <mat-datepicker #dp3 disabled="false"></mat-datepicker> ```