![](/img/trans.png)
[英]How to block the close event when selecting a date in angular material datepicker?
[英]Angular Material Datepicker: Change event not firing when selecting date
我正在使用 Angular 和 Angular Material 的 Datepicker。 大多数情况下一切正常,但是我添加了一个(change)
事件,该事件仅在用户手动输入日期时才有效。 当用户单击日期选择器弹出窗口中的日期时,它不会被触发。 需要明确的是,当用户单击某个日期时, date
的值实际上会发生变化,这只是(change)
事件,最终我的updateCalcs()
函数由于某种原因没有被触发。 当用户单击日期选择器中的日期时,如何触发事件?
<md-input-container>
<input mdInput [mdDatepicker]="datePicker" placeholder="Choose Date" name="date" [(ngModel)]="date" (change)="updateCalcs()" required>
<button mdSuffix [mdDatepickerToggle]="datePicker"></button>
</md-input-container>
<md-datepicker #datePicker></md-datepicker>
在文本框中编辑日期和通过日历控件更改日期时,都会引发dateChange
事件。 看这里
<mat-form-field>
<input matInput [matDatepicker]="datepicker" required placeholder="Choose a date" (dateChange)="valueChanged()">
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>
用ngModelChange
替换change
更改自
<input mdInput
[mdDatepicker]="datePicker"
placeholder="Choose Date"
name="date" [(ngModel)]="date"
(change)="updateCalcs()" required>
到
<input mdInput
[mdDatepicker]="datePicker"
placeholder="Choose Date"
name="date" [(ngModel)]="date"
(ngModelChange)="updateCalcs()" required>
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
和.ts
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
//console.log(event.value)
}
在这里查看
在md-datepicker
使用selectedChanged
。
<md-datepicker #datePicker (selectedChanged)="updateCalcs($event)"></md-datepicker>
$event
将发出您可以在updateCalcs()
函数中使用的新值。
updateCalcs(event){
console.log(event);
}
我必须补充一点, (dateInput)
并不总是为我开火,最终使用(keyup)
代码 HTML
<mat-form-field>
<input #fromInput matInput [matDatepicker]="pickerFrom" placeholder="סנן תאריך התחלה"
(dateChange)="filterFrom($event)" (keyup)="filterInputKeyupFrom()">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
最终代码 TS
private parseInputDate(v):Date{
//this was a manual change in the input and needs to be parsed
let a:Array<any> = v.split('.')
a.forEach((v, i) => a[i] = parseInt(v) + (i == 1 ? -1 : 0))
console.log(new Date(a[2], a[1], a[0]))
return new Date(a[2], a[1], a[0])
}
//(dateInput) wasn't always firing for me, ended up using (keyup)
filterInputKeyupFrom(){
this.lastFrom = this.parseInputDate(this.fromInput.nativeElement.value)
if (this.lastFrom) {
this.lastFrom.setSeconds(-1)
}
this.filterDates()
}
filterInputKeyupUpTo(){
this.lastTo = this.parseInputDate(this.toInput.nativeElement.value)
if (this.lastTo) {
this.lastTo.setDate(this.lastTo.getDate()+1)
}
this.filterDates()
}
filterFrom(e:MatDatepickerInputEvent<Date>){
console.log('filterFrom')
//changing manually the input and then exit from it fires here
if(e.value){
//need to clone the date or changes are applied on the Picker
this.lastFrom = new Date(e.value)
if (this.lastFrom) {
this.lastFrom.setSeconds(-1)
}
this.filterDates()
}
}
filterUpTo(e:MatDatepickerInputEvent<Date>){
console.log('filterUpTo')
if(e.value){
this.lastTo = new Date(e.value)
if (this.lastTo) {
this.lastTo.setDate(this.lastTo.getDate()+1)
}
this.filterDates()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.