时间戳

首页 > 解决方案 > 在 owl-date-time 中选择日期后如何自动关闭日历？

javascript - 在 owl-date-time 中选择日期后如何自动关闭日历？

问题描述

我正在使用 Angular 日期时间选择器来调用 owl-date-time。它运行良好。问题是，在我从日历中选择一个日期后，日历并没有关闭。我需要单击外部以关闭它。我的代码是这样的：

      <owl-date-time [(ngModel)]="owlDateTimeCurrentDate" formControlName="date" [readonlyInput]="true" [showButtons]="false"
    [dateFormat]="'MM/DD/YYYY'" [type]="'calendar'" [dataType]="'string'" [placeHolder]="'mm/dd/yyyy'"></owl-date-time>

标签： javascriptangulartypescript

解决方案

datepicker.close();选择日期后使用dateSelected

HTML

 <input [owlDateTimeTrigger]="dt"
           [owlDateTime]="dt"
           [formControl]="date">
        <owl-date-time [pickerType]="'calendar'"
                   [startView]="'year'"
                   (dateSelected)="chosenDateHandler($event, dt)"
                   #dt="owlDateTime">
       </owl-date-time>

JS

chosenDateHandler( normalizedMonth: Moment, datepicker: OwlDateTimeComponent<Moment> ) {
    const ctrlValue = this.dateTime.value;
    ctrlValue.month(normalizedMonth.month());
    this.dateTime.setValue(ctrlValue);
    datepicker.close();
}

推荐阅读