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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing AJAX for sending data to a PHP database and automatically updating the page

Currently, I've implemented a button: <ul> <li><button onclick="display('1')">1</button></li> <li><button onclick="display('2')">2</button></li> <li><butto ...

phpjavascriptjqueryajax

Eliminating the parent property name from the validation message of a nested object

When using @ValidateNested() with the class-validator library, I encountered a formatting issue when validating a nested object: // Object Schema: export class CreateServerSettingsDTO { @IsNotEmpty({ message: 'Username is required' }) usernam ...

typescriptnestjsclass-validator

What is the best way to synchronously load JSON in JavaScript?

I've encountered an issue while trying to develop an HTML5 game. My goal was to create a modular game by using a JSON file with different modules to load. Here's the code snippet I attempted var resources = {}; $.ajaxSetup({ async: false }); ...

javascriptajaxxmlhttprequest

Exploring the weather API integration with Angular 4

I've embarked on a journey to teach myself Angular4 by creating a Weather app. However, I'm facing challenges in connecting the API. Despite consulting various resources, such as: https://medium.com/craft-academy/connecting-an-api-to-an-angular- ...

angular

Run several asynchronous HTTP requests in the background within a Chrome extension

I am facing a situation where I need to make multiple ajax requests through a Chrome extension and display the successful results in the popup HTML of the extension. I have created an array of URLs and loop through them to perform the ajax requests. Every ...

javascriptjqueryajaxgoogle-chrome-extension

Revamp the Next.js and TypeScript API for improved efficiency

I am new to using Next.js and TypeScript, and I would like to refactor my code to improve data fetching speed. Currently, I have a file called dashboard.tsx with the following code: import Layout from "@/layouts/layout"; import React, { useC ...

typescriptnext.js

No results returned by Mongoose/MongoDB GeoJSON query

I have a Schema (Tour) which includes a GeoJSON Point type property called location. location: { type: { type: String, enum: ['Point'], required: true }, coordinates: { type: [Number], required: true ...

javascriptangulartypescriptmongodbmongoose

The combination of Autodesk Forge Viewer and React with TypeScript provides a powerful platform for developing

I'm brand new to React and Typescript, and I have a very basic question. In the viewer documentation, extensions are defined as classes. Is it possible to transform that class into a typescript function? Does that even make sense? For example, take th ...

typescriptautodesk-forgeautodesk-viewer

JointJS: I need to extract the source value from the JSON text with the ID field

I need to extract the text value from "source":{"id": using JSON data in this specific JavaScript object : { "cells": [ { "type": "devs.Model", "size": { "width": 40, "height": 40 }, "inPorts": [""], "outPorts": ["" ...

javascriptjqueryjson

Tips for successfully clearing the localStorage in an Ionic2 application upon exiting

Could someone please provide guidance on how to detect when the application is being exited using the hardware back button and then clear my localStorage data? I have three main reasons for needing this functionality: 1. Prompt the user to confirm if they ...

angularionic2

Encountering a problem with controlling the number of splits allowed

I am encountering an issue with splitting my string using the code below. splitter.map((item1) => { let splitter1 = item1.split("=")[0].trimLeft(); let splitter2 = item1.split("=")[1].trimRight(); }); The content of item1 is as fo ...

javascriptreactjs

Conditional return type mistakes

I'm facing an issue with a function that takes a parameter "value" and is supposed to return 0 or 1 based on its true or false value. Check it out here. const f = <T extends boolean>(value: T): false extends T ? 0 : 1 => { if (value === ...

javascripttypescripttypescript-generics

The issue with Three.js responsive canvas is that it fails to properly adjust the size of the

I'm currently working on a threejs basic scene and attempting to create a responsive canvas for a full-screen experience. However, the mesh inside the scene is not resizing correctly as expected. Instead of remaining a cube, it distorts into a rectang ...

javascriptcsscanvasthree.jsresize

The issue with the smooth scrolling feature in next/link has not been resolved

I am currently facing an issue where smooth scrolling is not working when using next/Link, but it works perfectly fine with anchor tags. However, the downside of using anchor tags is that the page reloads each time, whereas next/link does not reload the pa ...

javascriptcssnext.jsanchornext-link

How can you receive a file through AJAX response?

I have a standard Ajax function that I regularly use to call a specific function within my node.js server. This particular function is responsible for retrieving a file (usually in xls format) from the server and streaming it back to the client. Below is ...

javascriptjqueryajaxnode.js

Adjusting images of various sizes within a single row to fit accordingly

I am faced with a challenge of aligning a set of images on a webpage, each with varying heights, widths, and aspect ratios. My goal is to arrange them in a way that they fit seamlessly across the screen while ensuring their heights are uniform. Adjusting ...

javascripthtmlcss

Searching for a string within a JSON object in Angular: step-by-step guide

JSON Data Example { "rootData": { "test1": { "testData0": "Previous information", "testData1": "Earlier Information" }, "test2": { "testData0": ...

jsonangulartypescript

using ng-show to display array elements

There is a syntax error showing up on the console for the code below, but it still functions as intended. Can someone help identify what I might be missing? <p class="light" data-ng-show="selectedAppType in ['A1','A2','A3' ...

javascriptangularjs

Providing a callback function along with the specific execution context for it to be executed

myFn is a function that executes an asynchronous task and triggers the callback upon successful completion. SearchController.prototype.show = function (query) { this.searchService.myFn(arg1, this.myCallback); //I want to preserve the reference of `th ...

javascriptcallbackthis

MongoDB Integration of Collections - No Data Population

Having trouble merging a client and an account collection. When I use res.send(client), only the account id's are returned. Unsure how to include account information in clients. Have seen one to many solutions, but struggling with this two-way relati ...

javascriptnode.jsmongodbexpress