Comment fermer le calendrier après avoir cliqué sur la date

Question

Comment puis-je masquer le calendrier après la sélection d'une date? J'utilise Date-time-picker by DanyelYKPan.

Y at-il une fonction spécifique que je peux utiliser? Mon code ci-dessous

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

Depuis le début du code via le composant du plugin du sélecteur, l'appel passe à la fonction ci-dessous.

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

J'ai essayé avec le code ci-dessus cela ne fonctionnera qu'une seule fois après avoir cliqué sur le champ de date date de seconde date popup ne viendra pas. S'il vous plaît aidez-moi à résoudre ce problème.

Answer 1

Si j'étais vous j'utiliserais le mécanisme de Parent call of @ViewChild décrit dans la page d'interaction de composant angulaire.

1 - importer le DateTimePickerComponent

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

2- Se reporter à ViewChild et attribuer un nom de variable:

@ViewChild(DateTimePickerComponent) picker: DateTimePickerComponent; 

3- Maintenant, vous pouvez accéder à tous les attributs non privé/méthode décrite ici: https://github.com/DanielYKPan/date-time-picker/blob/master/src/picker.component.ts

Pour masquer le calendrier, vous pouvez définir le dialogVisible sur false:

this.picker.dialogVisible = false 

Il est maintenant temps de détecter l'événement click dans notre calendrier. Le plus simple est d'utiliser l'événement (ngModelChange).

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

Et dans notre composante:

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