代码之家 › 专栏 › 技术社区 › Chanaka Amarasinghe

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

typescript angular javascript

0

Chanaka Amarasinghe · 技术社区 · 6 年前

我使用角度日期时间选择器来调用owl日期时间。它工作得很好。问题是,在我从日历中选择一个日期之后,日历没有关闭。我需要在外面按一下才能关上。我的代码如下:

      <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>

3 回复 | 直到 6 年前

1

Shiv Kumar Baghel 6 年前

使用 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();
}

2

0

levk 6 年前

<owl-date-time [pickerType]="'calendar'" #dt1></owl-date-time> 此外,还可以选择使用内联版本并将其放入自己的弹出窗口中。我看到你使用的属性是[type],所以可能你有一个旧版本,如果是这样,我建议更新

3

0

Chanaka Amarasinghe 6 年前

你可以用 [(ngModel)]="userGridFilterDateNow" (ngModelChange)='userGridFilterDatePicker.hide() #userGridFilterDatePicker' . 它正在工作。在我这样的代码示例中。

      <owl-date-time [(ngModel)]="userGridFilterDateNow" (ngModelChange)='userGridFilterDatePicker.hide()' [ngClass]="hideCalender ? 'visibility-option':''"
    formControlName="date" #userGridFilterDatePicker [readonlyInput]="true" [showButtons]="false" [dateFormat]="'MM/DD/YYYY'"
    [type]="'calendar'" [dataType]="'string'" [placeHolder]="'dd/mm/yyyy'"></owl-date-time>