Angular Material 日期范围选择器设置默认值
Angular Material Date Range Picker Setting a Default Value
我正在尝试设置日期选择器打开的默认月份,基于将从日历事件中获取的值。
例如:您在四月点击日历上的下一个月,当您 select 日期选择器在五月打开时
我环顾四周发现很多问题都讨论了 DatePicker 而不是 RangeSelector,通常如何解决这个问题(据我所知)是:
//Adding a [Value] Bind to the Input and setting the Value
E.G
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date" [value]="getTomorrow()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
mat-date-range-input 没有 [Value] 属性
所以我不确定如何设置“默认值:select 或:
范围内的值
<mat-form-field appearance="fill">
<mat-label>Click the Icon to select a Date</mat-label>
<mat-date-range-input [formGroup]="range" >
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
<mat-date-range-picker #dateRangePicker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
日期选择器:
Link
我找到的关于如何设置普通单一日期选择器的解决方案:
注意我使用的是范围选择器,所以我的输入字段不同于普通的 Basic 日期选择器。所以我无法使用 [Value] Bind.
以相同的方式进行绑定
ShortVersion: I want to bind to the mat-date-range-input to set the Default Month it starts on
它只是给 FormControls 赋值 - 如果您使用 formGroups,则不使用 value-,例如
this.range = new FormGroup({
start: new FormControl(new Date(2021, 1, 15)),
end: new FormControl(new Date(2021, 2, 16))
});
fb stands for formbuilder.
this.userFrm = this.fb.group({
date: [new Date('Date format')]
})
我正在尝试设置日期选择器打开的默认月份,基于将从日历事件中获取的值。 例如:您在四月点击日历上的下一个月,当您 select 日期选择器在五月打开时
我环顾四周发现很多问题都讨论了 DatePicker 而不是 RangeSelector,通常如何解决这个问题(据我所知)是:
//Adding a [Value] Bind to the Input and setting the Value
E.G
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date" [value]="getTomorrow()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
mat-date-range-input 没有 [Value] 属性
所以我不确定如何设置“默认值:select 或:
范围内的值<mat-form-field appearance="fill">
<mat-label>Click the Icon to select a Date</mat-label>
<mat-date-range-input [formGroup]="range" >
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
<mat-date-range-picker #dateRangePicker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
日期选择器: Link
我找到的关于如何设置普通单一日期选择器的解决方案:
注意我使用的是范围选择器,所以我的输入字段不同于普通的 Basic 日期选择器。所以我无法使用 [Value] Bind.
以相同的方式进行绑定ShortVersion: I want to bind to the mat-date-range-input to set the Default Month it starts on
它只是给 FormControls 赋值 - 如果您使用 formGroups,则不使用 value-,例如
this.range = new FormGroup({
start: new FormControl(new Date(2021, 1, 15)),
end: new FormControl(new Date(2021, 2, 16))
});
fb stands for formbuilder.
this.userFrm = this.fb.group({
date: [new Date('Date format')]
})