Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Question

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Utilizing Angular Date Time Picker to invoke owl-date-time has been functioning flawlessly. However, one issue I have encountered is that the calendar does not automatically close after selecting a date. Instead, I am required to click outside of the calendar in order for it to close. Here is a snippet of my code:

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

javascript angular typescript

Answer 1

Answer №1

To close the datepicker after selecting a date, use datepicker.close();

Embedded HTML snippet:

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

JavaScript function:

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

Answer 2

To close the datepicker after selecting a date, use datepicker.close();

Embedded HTML snippet:

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

JavaScript function:

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

Answer 3

Answer №2

After experimenting a bit, you can achieve a different look by adding [pickerType]="'calendar'" like this:

<owl-date-time [pickerType]="'calendar'"  #dt1></owl-date-time>

You also have the option of using the inline version and placing it in your own popup. If you are using the [type] property, you might have an older version so I recommend updating. Best of luck!

Answer 4

After experimenting a bit, you can achieve a different look by adding [pickerType]="'calendar'" like this:

<owl-date-time [pickerType]="'calendar'"  #dt1></owl-date-time>

You also have the option of using the inline version and placing it in your own popup. If you are using the [type] property, you might have an older version so I recommend updating. Best of luck!

Answer 5

Answer №3

To implement this functionality, you can utilize the following code snippet:

[(ngModel)]="userGridFilterDateNow" (ngModelChange)='userGridFilterDatePicker.hide() #userGridFilterDatePicker'

. This code has been successfully integrated into my project.

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

Answer 6

To implement this functionality, you can utilize the following code snippet:

[(ngModel)]="userGridFilterDateNow" (ngModelChange)='userGridFilterDatePicker.hide() #userGridFilterDatePicker'

. This code has been successfully integrated into my project.

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

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to utilize a JavaScript framework within a Chrome extension?

limitation on pairings of two generic types

Error message: In Angular 8 using Jest instead of Jasmine, there is no exported member called 'SpyObj'

Is it possible to utilize AngularJS' ng-view and routing alongside jade?

Updating a validation directive on $watch in AngularJS version 1.2

Something is overriding the style created by makestyle material UI that I had implemented

The Power of Json, Ajax, and Javascript

The issue of Datatables child row not refreshing when using AJAX

Filtering with checkboxes (looking for help with logic functionality)

Firebase's equalTo function seems to be malfunctioning

The property of the Angular Typescript object is distinctly not defined, yet the property itself is

Determine the type of element existing in the table cell

How can I create a responsive design for my div elements?

IE and Firefox display different responses when encountering an empty XML document

Difficulty encountered when applying date filtering on a specific filter in the MUI-DataGrid

No declaration file was located for the module '@handsontable/react' despite the presence of a 'd.ts' file

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

vuex: The decision between using $store.commit and directly calling the function

Creating a reverse proxy using next.js

I am looking to update the background color of the material UI helper text