Ways to stop dropdown from closing when choosing a date in mat datepicker

Utilizing both Bootstrap dropdown and mat date picker in a drop-down menu presents an issue wherein selecting a date from the mat date picker results in the closure of the dropdown. Preserving the dropdown's visibility post-selecting the date is desired. The application framework being used is Angular 17.

<li class="nav-item drop-wrapper">
            <div class="dropdown-menu gear-drop settings-menu" >
              <p class="text-center py-2 border-bottom setpsize">
                Settings Menu
              </p>
              <a class="dropdown-item">
                <div>
                  <div>
                    <form class="toggle-form" style="margin-left: 0px;">
                      My Calendar
    
                      <label class="switch" style="margin-left: 10px;">
                        <input
                        id="myCalCheckBox"
                          type="checkbox"
                          [checked]="myCalEnabled"
                          (change)="myCalEnableDisable()"
                        />
                        <span class="slider round" style="padding-left: 2px;"></span>
                      </label>
                    </form>
                  </div>
                  <div>
                    <mat-field>
                      <input matInput [matDatepicker]="picker1" placeholder="Start Date" [min]="scratchPadView?.minDateMyCal" [max]="scratchPadView?.maxDateMyCal" (dateChange)="myCalSelectedDate()" [(ngModel)]="myCalStartdate">
                      <mat-datepicker-toggle matSuffix [for]="picker1" (click)="open()"></mat-datepicker-toggle>
                      <mat-datepicker #picker1 [startAt]="myCalDefaultDate" touchUi="true"></mat-datepicker>
                      <input matInput [matDatepicker]="picker2" placeholder="End Date" [min]="scratchPadView?.minDateMyCal" [max]="scratchPadView?.maxDateMyCal" (dateChange)="myCalSelectedDate()" [(ngModel)]="myCalEndDate">
                      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                      <mat-datepicker #picker2 [startAt]="myCalDefaultDate"></mat-datepicker>
                    </mat-field>
                  </div>
                </div>
              </a>
            </div>
          </li>

The objective is to maintain the display of the dropdown even after choosing a date.

angulartypescriptbootstrap-4datepickermat

Answer №1

<mat-form-field class="example-form-field">
  <mat-label>Select a date</mat-label>
  <input matInput [matDatepicker]="datepicker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker>
    <mat-datepicker-actions>
      <button mat-button matDatepickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
    </mat-datepicker-actions>
  </mat-datepicker>
</mat-form-field>

Don't close the mat date picker unless you click on apply.

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

Feeling lost about arrow functions in JavaScript

Here is the code I am currently using to increment the value of intVariable using window.setInterval. var Arrow = (function () { function Arrow() { this.intVariable = 1; this.itemId = -1; this.interval = 25; } Arrow.p ...

javascripttypescript

Define an object in TypeScript without including a specific field type in the definition

Let's consider a scenario where there is an interface called Book: interface Book { id: number info: { name: string, } } Next, a list named bookList is defined: const bookList: Book[] = [ { id: 1, info: { ...

typescript

The centering of content is not flawless using Bootstrap

Below is a snippet of my code: <div class="container branduri justify-content-center"> <div class="row justify-content-center"> <div class="col-xl-4"> <h1><strong>+100</strong></h1> </div> < ...

htmlcssbootstrap-4

Having trouble retrieving an object property in HTML or TypeScript within an Angular framework?

export class ComponentOne { array_all_items: Array<{ page_details: any }> = []; array_page_details: Array<{ identifier: number, title: string }> = []; initial_item: Array<{ identifier: number, title: string }> = [ { ...

htmlangulartypescript

Tips for executing several HTTP requests from an array using RXJS

At the moment, I am working on a synchronization service using Angular. My goal is to make a database request and receive an array of URLs in return. The next step is to process each URL sequentially. Below is the current code: return this.http.get<any ...

angularrxjs

The value of form.formGroup is not equivalent to the output of console.log(form)

Having an issue here. When I send a Form to a component, If I use console.log(form), it displays the object correctly. However, when I check the form in the console, the form.formGroup.value looks fine (e.g. {MOBILE0: 'xxx', PHONE0: 'xxx&ap ...

angularformstypescriptangular-forms

Axios is causing my Pokemon state elements to render in a jumbled order

Forgive me if this sounds like a silly question - I am currently working on a small Pokedex application using React and TypeScript. I'm facing an issue where after the initial page load, some items appear out of order after a few refreshes. This make ...

javascriptreactjstypescriptaxios

What is the reason for the change event being triggered when a controlValueAccessor loses focus?

When I incorporate a custom input that implements the ControlValueAccessor interface into my template and bind to its change event like this: <input-app [value]="'initialVal'" (change)="onChange($event)"></input-app> My custom input ...

angularangular-reactive-formsangular-forms

Angular 2 template can randomly display elements by shuffling the object of objects

I am working with a collection of objects that have the following structure: https://i.stack.imgur.com/ej63v.png To display all images in my template, I am using Object.keys Within the component: this.objectKeys = Object.keys; In the template: <ul ...

javascriptangulartypescriptjavascript-objects

The input text in the Typeahead field does not reset even after calling this.setState

As I work on creating a watchlist with typeahead functionality to suggest options as the user types, I encountered an issue where the text box is not resetting after submission. I attempted the solution mentioned in this resource by calling this.setState( ...

javascriptreactjstypescriptstate

The 'RouterLink' JSX element type is missing any construct or call signatures

While researching this issue on the internet and Stack Overflow, I've noticed a common theme with problems related to React. An example can be found here. However, I am working with Vue and encountering errors in Vue's own components within a new ...

typescriptvue.jstypesvuejs3vue-tsc

Tips for displaying an element for each item chosen in a multi-select box

I currently have a situation where I am rendering for every selected element within my multiselect angular material selectbox. The rendering process functions correctly when I select an element, but the issue arises when I try to deselect one - it just ke ...

javascriptangulartypescriptangular-material

What steps should I take to successfully compile my Typescript Webpack project without any errors?

Currently, I am attempting to convert only two .js files into .ts files within my webpack node.js project and then compile them (actions.ts and flux.ts). When I execute the command: webpack --progress --colors I encounter the following errors: 'use ...

node.jsnpmtypescriptwebpackdefinitelytyped

``There seems to be a problem with the ngb time picker when using the up and

Currently, I am utilizing Bootstrap 4 and NG Bootstrap time picker for a project in Angular 10. Despite correctly adding all the code, I have encountered an issue where the up and down arrows on the time picker are not functioning as expected. Below is a s ...

javascriptangularng-bootstrap

Peeling off the layers of an array declared as const to reveal its mutable version without being restricted to tuples

I'm facing a challenge with an array declared as as const: // example of a simple mock class class Child { _ = "" } const child = new Child(); const schema = [[child], child] as const; // readonly [readonly [Child], Child]; This array rep ...

typescript

Issue with resolving symbol JSON in Angular 7 when using JSON.stringify

Let me start off by saying that I am new to Angular 7. Currently, I am in the process of developing an application using Angular 7 with a C# backend. The specific challenge I am facing is the need to serialize an object in my component/service before sendi ...

jsonangularangular7

Unable to render React component after updating its state

After successfully retrieving data from my API, React is failing to render the cards. export default function Subjects() { const userApi = useUserService(); const auth = useRecoilValue(AuthAtom); const [loading, setLoading] = React.useState<boolea ...

reactjstypescriptreact-hooksmaterial-ui

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Coming from a Java developer background, I am relatively new to JavaScript/TypeScript. Is there a standard approach for handling and preserving the cause of an Error in JavaScript/TypeScript? I aim to obtain a comprehensive stack trace when wrapping an E ...

javascripttypescripterror-handlingstack-trace

Creating a double-layered donut chart with Chart.js

I'm attempting to create a unique pie chart that illustrates an array of countries on the first level and their respective cities on the second level. After modifying the data in a JSON file to align with my goal, it doesn't seem to be working a ...

javascriptarraysjsonangularchart.js

Generate types based on properties of a nested interface dynamically

Consider the setup provided: enum FormGroups { customer = 'customer', address = 'address', } interface Customer { 'firstName': string; } interface Address { 'street': string; } interface SomeFormEvent { ...

typescript