How to close calendar popup after clicking on date

Question

How can I hide the calendar after a date is selected? I am using Date-time-picker by DanyelYKPan .

Is there a specific function that I can use? My code below

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

From top of the code through picker plugin component call will goes to below function.

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

I tried with above code it will works only one time after clicking on date field second time date popup will not come. Please help me to solve this problem.

Answer 1

If I were you I would use the mechanism of Parent call of @ViewChild described in the angular Component Interaction page.

1 - import the DateTimePickerComponent

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

2- Refer it to ViewChild and assign a variable name:

@ViewChild(DateTimePickerComponent) picker: DateTimePickerComponent;

3- Now you can access all non private attribute/method described here: https://github.com/DanielYKPan/date-time-picker/blob/master/src/picker.component.ts by this.picker

For hiding the calendar you can set the dialogVisible to false :

this.picker.dialogVisible = false

Now time to detect the click event in our calendar. The simplest way is to use (ngModelChange) event.

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

And in our component :

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