Question

我正在使用Angular Date Time Picker调用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>

Answer 1

我玩了一点，尝试添加[pickerType] =“'calendar'”使它看起来像这样： <owl-date-time [pickerType]="'calendar'" #dt1></owl-date-time> 还可以选择使用内联版本并将其放入您自己的弹出窗口中。我看到您使用的属性是[类型]，所以也许您有一个较旧的版本，如果是的话，我建议您更新祝你好运

Answer 2

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

Answer 3

您可以使用[(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>

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

3 个答案: