我正在使用ngbDatepicker,仅当我从下拉列表中选择日期时,它才有效。但是,如果我通过键盘更改日期并按Enter,则不会发生任何事情。
<div class="input-group">
<input name="datepicker"
class="form-control"
ngbDatepicker
#datepicker="ngbDatepicker"
[autoClose]="'outside'"
(dateSelect)="onDateSelection($event)"
[displayMonths]="2"
[dayTemplate]="t"
outsideDays="hidden"
[startDate]="fromDate">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
在组件中:
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
}
isInside(date: NgbDate) {
return date.after(this.fromDate) && date.before(this.toDate);
}
isRange(date: NgbDate) {
return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
}
validateInput(currentValue: NgbDate, input: string): NgbDate {
const parsed = this.formatter.parse(input);
return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
}
在组件中:
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
this.emitFromDate();
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
this.emitToDate();
} else {
this.toDate = null;
this.fromDate = date;
this.emitFromDate();
}
}
有人遇到过这种情况并且能够使其正常工作吗?
答案 0 :(得分:0)
只需使用ViewChild进行datePicker并在onDateSelection函数中关闭
@ViewChild('datepicker',{static:false}) ngbDatepicker
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
this.ngbDatepicker.close(); //<---this one
} else {
this.toDate = null;
this.fromDate = date;
}
}
答案 1 :(得分:0)
ngx-bootstrap的输入元素是动态创建的,似乎没有提供与其交互的界面。
作为一种变通方法,您可以检索这些输入的引用(在ngAfterViewInit
中),并将侦听器通常与关键事件绑定,如下所示:
component.ts
ngAfterViewInit()
{
let dpFrom = document.querySelector('input[name=dpFromDate]');
this.renderer.listen(dpFrom,"keydown", (evt: KeyboardEvent)=>
{
if(evt.key=='Enter')
{
console.log('From date selected', this.fromDate);
}
});
let dpTo = document.querySelector('input[name=dpToDate]');
this.renderer.listen(dpTo,"keydown", (evt: KeyboardEvent)=>
{
if(evt.key=='Enter')
{
console.log('To date selected', this.toDate);
}
})
}