單擊日期后如何關閉日歷彈出窗口

Question

選擇日期后如何隱藏日歷？ 我正在使用DanyelYKPan的Date-time-picker 。

有沒有可以使用的特定功能？ 我的代碼如下

 <div class="col-3">
  <div class="form-group calenderForm calenderForm1">
   <label for="templateName">REPAIR DATE (FROM)</label>
    <owl-date-time name="repairDateFrom"
     [(ngModel)]="repairDateFrom" 
     [max]="max"
     [type]="'calendar'"
     [dateFormat]="'YYYY-MM-DD'"
     [placeHolder]="'YYYY-MM-DD'"
    ></owl-date-time>
  <div class="error-message-block"></div>
  <input type="hidden" name="repairDateFrom" id = "repairDateFrom" value="
  {{repairDateFrom | date: 'yyyy-MM-dd'}}" (click)="closeDatePopUp()"/>
  </div>
 </div>

從代碼頂部通過選擇器插件組件調用將轉到以下函數。

    DateTimePickerComponent.prototype.updateFormattedValue = function () {
    var formattedValue = '';
    if (this.value) {
        var d = new Date();

        if (this.isSingleSelection()) {
            this.value = this.value.setHours(d.getHours(), d.getMinutes());
            formattedValue = date_fns_1.format(this.value, this.dateFormat, 
            { locale: this.locale.dateFns });
            $('.owl-calendar-wrapper').on('click',function(){
                $('.owl-dateTime-dialog').hide();
            });
        }}}

我嘗試使用上面的代碼，它僅在單擊日期字段后一次只能工作一次，第二次日期彈出不會出現。 請幫我解決這個問題。

Answer 1

如果您是我，我將使用角度組件交互頁面中介紹的@ViewChild的父調用機制。

1-導入DateTimePickerComponent

import  { DateTimePickerComponent } from "ng-pick-datetime/picker.component"

2-將其引用給ViewChild並分配一個變量名稱：

@ViewChild(DateTimePickerComponent) picker: DateTimePickerComponent;

3-現在，您可以通過this.picker訪問此處描述的所有非私有屬性/方法： https : this.picker

要隱藏日歷，可以將dialogVisible設置為false ：

this.picker.dialogVisible = false

現在是時候在我們的日歷中檢測單擊事件了。 最簡單的方法是使用（ngModelChange）事件。

<owl-date-time
  [(ngModel)]="repairDateFrom" name="repairDateFrom" 
  (ngModelChange)="onDateChange()"
  [type]="'calendar'"
  [dateFormat]="'YYYY-MM-DD'"
></owl-date-time>

在我們的組件中：

onDateChange() {
    this.picker.dialogVisible = false;
}