如何在點擊日期後關閉日曆彈出框

如何在選擇日期後隱藏日曆？我正在使用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>

從代碼頂部通過picker插件組件調用將會進入下面的函數。

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

我試着用上面的代碼點擊日期字段第二次約會彈出不會來以後，會工作的一次。請幫我解決這個問題。

來源

2017-09-12 Kowshik

如果我是你，我將使用在角度組件交互頁面中描述的Parent call of @ViewChild機制。

1 - 導入DateTimePickerComponent

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

2 - 它參考ViewChild並分配一個變量名：

@ViewChild(DateTimePickerComponent) picker: DateTimePickerComponent;

3-現在您可以在這裏描述的所有非私人屬性/方法： https://github.com/DanielYKPan/date-time-picker/blob/master/src/picker.component.tsthis.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; 
}

來源

2017-09-12 06:54:35 Fetrarij

如何在點擊日期後關閉日曆彈出框

回答

相關問題