问题描述
我有 Angular Material的DatePickerRange,我想在我尝试使用该函数(更改)的DatePicker中更改值时运行一个函数,但是它不起作用,我很乐意为您提供帮助。 谢谢!
这是我的html:
<mat-form-field class="form-field">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></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>
这就是我要激活的功能:
@Output() newItemEvent = new EventEmitter<bookedDate>();
addNewDate() {
this.dateRange.dateStart = this.range.get('start').value;
this.dateRange.dateEnd = this.range.get('end').value;
this.newItemEvent.emit(this.dateRange);
}
解决方法
改为尝试dateChange
<mat-date-range-input [formGroup]="range" [rangePicker]="picker" (dateChange)="addNewDate()">
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
,
我有一些与您的问题类似的问题对我有用,因此我希望它可以为您提供帮助或为您提供解决方案的提示 这是我的html:
<mat-form-field class="dialogform">
<mat-label>Duree du Session : </mat-label>
<input matInput
required
placeholder=""
[satDatepicker]="picker"
[value]="dateRangeDisp"
(dateChange)="saveDate($event)"
>
<sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
<sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
</mat-form-field>
函数是:
saveDate(event: any) {
// look at how the date is emitted from save
console.log(event.target.value.begin);
//this.session.dateDebut = event.target.value.begin;
console.log(event.target.value.end);
// change in view
this.dateRangeDisp = event.target.value;
// save date range as string value for sending to db
// ... save to db
}
,
我的方法是将link添加到matStartDate
和matEndDate
的输入中。在下面的模板示例中,它们是dateRangeStart
和dateRangeEnd
:
// Template
<mat-form-field appearance="standard">
<mat-label>{{reportField.value.label}}</mat-label>
<mat-date-range-input [rangePicker]="dateRangePicker">
<input matStartDate
placeholder="Start date"
#dateRangeStart>
<input matEndDate
placeholder="End date"
#dateRangeEnd
(dateChange)="dateRangeChange(dateRangeStart,dateRangeEnd)">
</mat-date-range-input>
<mat-datepicker-toggle matPrefix
[for]="dateRangePicker">
</mat-datepicker-toggle>
<mat-date-range-picker #dateRangePicker></mat-date-range-picker>
</mat-form-field>
然后可以通过dateChange
上的matEndDate
输出调用的函数来访问这些输入的值。
// Component
dateRangeChange(dateRangeStart: HTMLInputElement,dateRangeEnd: HTMLInputElement) {
console.log(dateRangeStart.value);
console.log(dateRangeEnd.value);
}
这避免了两个输入都需要dateChange
事件。
@Kirubel和@Irad Amri谢谢!
它最终以这种方式对我有效:
HTML-
<mat-form-field class="form-field">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input **(dateInput)="addEvent('input',$event)"
(dateChange)="addEvent('change',$event)"** matStartDate
formControlName="start" placeholder="Start date">
<input **(dateInput)="addNewDate('input',$event)"
(dateChange)="addNewDate('change',$event)"** matEndDate
formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></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>
TS-
@Output() newItemEvent = new EventEmitter<bookedDate>();
addNewDate(type: string,event: MatDatepickerInputEvent<Date>) {
this.dateRange.dateStart = this.range.get('start').value;
this.dateRange.dateEnd = this.range.get('end').value;
this.newItemEvent.emit(this.dateRange);
}
再次感谢您的帮助!
,我自己也遇到过这个问题,以下是对我有帮助的解决方案: 组件.ts:
import * as moment from 'moment';
import { FormControl,FormGroup } from "@angular/forms";
import { DateAdapter,MAT_DATE_FORMATS,MatDateFormats } from "@angular/material/core";
import { MomentDateAdapter } from '@angular/material-moment-adapter';
const CUSTOM_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: 'D/MM/YYYY'
},display: {
dateInput: 'DD/MM/YYYY',monthYearLabel: 'MMMM Y',dateA11yLabel: 'LL',monthYearA11yLabel: 'MMMM Y'
}
};
@Component({
providers: [
{provide: MAT_DATE_FORMATS,useValue: CUSTOM_DATE_FORMATS},{provide: DateAdapter,useClass: MomentDateAdapter}
],})
@ViewChild('picker') picker: any;
dateRange: moment.Moment;
disabled = false;
tempDate = new Date().setMonth(new Date().getMonth() - 1);
range = new FormGroup({
start: new FormControl(new Date(this.tempDate)),end: new FormControl(new Date()),});
ngAfterViewInit() {
this.range.valueChanges.pipe(
debounceTime(200)
).subscribe(event => {
if (event.start && event.end) {
this.onDateChanged(event);
}
});
}
<mat-form-field class="date-range" appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input
[formGroup]="range"
[rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></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>