【发布时间】:2019-03-22 08:52:01
【问题描述】:
我在 Angular 4.x 中使用 Angular Material 2 Datepicker - 当我选择一个日期时,它应该在 datepicker 关闭时发出一个函数(它在选择日期时关闭)。我基本上希望能够选择一个日期而不关闭日期选择器(它应该保留在屏幕上并突出显示所选日期)
这是基于以下代码,该代码在 stackblitz 上运行良好 - 但由于某种原因不在我自己的应用程序中? https://stackblitz.com/edit/angular-ysspzm-ckkrbd
-注意- stackblitz 代码是我遇到的一些通用代码,与下面的代码不同(尽管几乎相同)
// 组件
@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.scss'],
})
export class DatepickerComponent {
@ViewChild('keepOpen') _input: ElementRef;
_openCalendar(picker: MatDatepicker<Date>) {
picker.open();
console.log('here1'); // i see this in the console
}
_openCalendarClosed(picker: MatDatepicker<Date>) {
picker.open();
console.log('here2'); // never ever see this in the console log??
}
}
// html
<input
matInput
[matDatepicker]="picker"
placeholder="Choose a date"
(click)="_openCalendar(picker)"
#keepOpen>
<mat-datepicker-toggle
matSuffix
[for]="picker">
</mat-datepicker-toggle>
<mat-datepicker
#picker
class="fixed-open"
opened="true"
(closed)="_openCalendarClosed(picker)">
</mat-datepicker>
【问题讨论】:
-
您提供的 stackblitz 链接不包含您的问题中的代码。
-
@p4r1 抱歉,我应该说得更清楚一点——stackblitz 中的代码不是我的代码,但它与我尝试执行相同的功能几乎相同——我什至在我的应用程序仍然无法正常工作:(
-
当您说它在您的应用中不起作用时,这是什么意思?
-
@p4r1 在 HTML 组件中,当日期选择器“关闭”时,它应该调用函数
_openCalendarClosed()函数 - 这个函数基本上保持日期选择器始终打开,因为当前它在你关闭后关闭选择了一个日期 -
我不确定升级是否有帮助,因为 2.0.0-beta.12 是 Material 的最后一个正式支持 Angular 4.x 的版本。材料 5.x 版本也都达到了 angular 5.x。
标签: javascript angular datepicker angular-material2