单击日期后如何关闭日历弹出窗口答案

【问题标题】：How to close calendar popup after clicking on date单击日期后如何关闭日历弹出窗口
【发布时间】：2017-09-12 01:44:30
【问题描述】：

如何在选择日期后隐藏日历？我正在使用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();
            });
        }}}

我用上面的代码试过，点击日期字段后它只会工作一次，第二次日期弹出窗口不会出现。请帮我解决这个问题。

【问题讨论】：

标签： javascript jquery twitter-bootstrap angular datetimepicker

【解决方案1】：

如果我是你，我会使用角度组件交互页面中描述的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.ts by 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;
}

【讨论】：