[英]Set default value for angular material datePicker with angular 5
I'm using a date picker from angular material.我正在使用角度材料的日期选择器。 I want to set a default value but it is not showing the value.我想设置一个默认值,但它没有显示该值。
<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>
this is my .js code with the value that i want to set as default这是我的 .js 代码,其值我想设置为默认值
var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy');
this.form = this.formBuilder.group({
dataInicial: [data_inicial],
...
This works for me!这对我有用!
HTML- 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- TS-
date1 = new FormControl(new Date())
You need to provide a Date object to the startAt change as below:您需要为 startAt 更改提供一个 Date 对象,如下所示:
In .ts:在 .ts 中:
date = new Date((new Date().getTime() - 3888000000));
In html:在 HTML 中:
<mat-datepicker [startAt]="date" #picker></mat-datepicker>
A working demo here: https://stackblitz.com/edit/angular-n9yojx这里有一个工作演示: https : //stackblitz.com/edit/angular-n9yojx
You can use the formControl defined and in your input.您可以在输入中使用定义的 formControl。
here is html这是 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>
here is TS declare you formControl这是 TS 声明你 formControl
date: FormControl;
this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>))
在一组表单控制器中,您可以使用默认日期,如下所示。
birthdayCtrl: ['1999-01-31']
Below is working code with Angular 10, Angular Material 10 and Reactive forms下面是 Angular 10、Angular Material 10 和 Reactive 表单的工作代码
component.ts组件.ts
this.youForm= this._formBuilder.group({
StartDate: [new Date(), Validators.required],
});
No change on component.html 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>
Using Template driven approach the solution is as followed.使用模板驱动的方法,解决方案如下。
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> ```
ngModel works for me... 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>
in your .html----在你的 .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>
in your .ts----在你的 .ts----
dateF:any=new Date();
Here is my answer,这是我的答案,
in your .html在您的 .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>
in your .ts在你的 .ts
this.form = this.formBuilder.group({
date: new FormControl(new Date()), // Current Date
...
});
This will set current date as default date.这会将当前日期设置为默认日期。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.