日付をクリックしてカレンダーポップアップを閉じる方法

Question

日付を選択した後でカレンダーを非表示にするにはどうすればよいですか？私はDate-time-picker by DanyelYKPanを使用しています。

使用できる特定の機能はありますか？ピッカープラグイン・コンポーネント・コールによるコードの上から

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

上記のコードで試したのは、日付フィールドを2回クリックした後に1回だけ動作します。日付ポップアップは表示されません。 この問題を解決するのを手伝ってください。

Answer 1

私があなただったら、角度のコンポーネントインタラクションページに記載されているParent call of @ViewChildのメカニズムを使用します。

1 - ViewChildにそれを参照し、変数名に割り当てDateTimePickerComponent

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

2-インポート：今、あなたはここに記載されているすべての非private属性/メソッドにアクセスすることができます

@ViewChild(DateTimePickerComponent) picker: DateTimePickerComponent; 

3-： https://github.com/DanielYKPan/date-time-picker/blob/master/src/picker.component.ts by this.picker

カレンダーを非表示にするには、dialogVisibleをに設定します。：

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