how to auto close the calendar after selecting a date in owl-date-time?

Question

I'm using Angular Date Time Picker to call owl-date-time. It is working perfectly. The thing is, the calendar is not closing after I select a date from the calendar. I need to click outside to close that. My code is like this:

      <owl-date-time [(ngModel)]="owlDateTimeCurrentDate" formControlName="date" [readonlyInput]="true" [showButtons]="false"
    [dateFormat]="'MM/DD/YYYY'" [type]="'calendar'" [dataType]="'string'" [placeHolder]="'mm/dd/yyyy'"></owl-date-time>

Answer 1

i played with this a little bit, try adding [pickerType]="'calendar'" to make it look like this: <owl-date-time [pickerType]="'calendar'" #dt1></owl-date-time> also there is the option of using the inline version and put it in your own popup. i see that the property you use is [type] so maybe you have an older version , if so i suggest updating good luck

Answer 2

use datepicker.close(); after date is selected on dateSelected

HTML

 <input [owlDateTimeTrigger]="dt"
           [owlDateTime]="dt"
           [formControl]="date">
        <owl-date-time [pickerType]="'calendar'"
                   [startView]="'year'"
                   (dateSelected)="chosenDateHandler($event, dt)"
                   #dt="owlDateTime">
       </owl-date-time>

JS

chosenDateHandler( normalizedMonth: Moment, datepicker: OwlDateTimeComponent<Moment> ) {
    const ctrlValue = this.dateTime.value;
    ctrlValue.month(normalizedMonth.month());
    this.dateTime.setValue(ctrlValue);
    datepicker.close();
}

Answer 3

You can use [(ngModel)]="userGridFilterDateNow" (ngModelChange)='userGridFilterDatePicker.hide() #userGridFilterDatePicker' . It is working. In my code sample like this.

      <owl-date-time [(ngModel)]="userGridFilterDateNow" (ngModelChange)='userGridFilterDatePicker.hide()' [ngClass]="hideCalender ? 'visibility-option':''"
    formControlName="date" #userGridFilterDatePicker [readonlyInput]="true" [showButtons]="false" [dateFormat]="'MM/DD/YYYY'"
    [type]="'calendar'" [dataType]="'string'" [placeHolder]="'dd/mm/yyyy'"></owl-date-time>