我正在使用有角材料的日期选择器。我想设置一个默认值,但它没有显示该值。
<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],
...
这对我有用!
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())
您需要为 startAt 更改提供一个 Date 对象,如下所示:
在.ts中:
date = new Date((new Date().getTime() - 3888000000));
在 html 中:
<mat-datepicker [startAt]="date" #picker></mat-datepicker>
您可以在输入中使用定义的 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>))
下面是 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>
在一组表单控制器中,您可以使用默认日期,如下所示。
birthdayCtrl: ['1999-01-31']
使用模板驱动方法,解决方案如下。
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> ```
在你的.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();
ngModel 对我有用...
var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy');
<mat-form-field class="mr-sm-24" fxFlex (click)="open()" >
<input matInput [picker]="picker" placeholder="Date"
autocomplete="off"
name="date"
formControlName="date" [ngModel]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker>
</mat-form-field>
这是我的答案,
在你的.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
...
});
这会将当前日期设置为默认日期。