Tips on utilising the datepicker solely with the calendar icon, avoiding the need for any input fields

I'm currently working on a Datatable filter and I would like to incorporate a calendar icon to facilitate date filtering by simply clicking on the Datatable Header.

At this stage, I've managed to display a calendar Icon on my Datatable header, but I now need guidance on how to utilize it as a date picker?

This is my HTML setup:

<ng-container matColumnDef="Date">
  <mat-header-cell *matHeaderCellDef fxHide mat-sor t-header fxShow.gt-md>
    Date de l'opération
    <mat-icon>
      calendar_today
    </mat-icon>
  </mat-header-cell>

  <mat-cell *matCellDef="let element" fxHide fxShow.gt-md>
    <p class="category text-truncate">
      {{element.CreatedDateGmt}}
    </p>
  </mat-cell>
</ng-container>

Answer №1

One option is to utilize a mat-menu along with a mat-calendar as shown in this Stack Overflow post here. Simply remove the "div" element to prevent stopPropagation...

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
     <mat-calendar #calendar 
        (selectedChange)="select($event,calendar)" 
        [dateClass]="isSelected">
     </mat-calendar>
</mat-menu>

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

Encountering issues in d3.js following the transition to Angular 8

After upgrading my Angular 4 app to Angular 8, I encountered an issue where the application works fine in development build but breaks in production build. Upon loading the application, the following error is displayed. Uncaught TypeError: Cannot read p ...

Angular 10 encounters difficulties when attempting to execute HttpClient

I encountered an error when attempting to execute "ng build". The error message states: ERROR in node_modules/@angular/common/http/http.d.ts:81:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. ...

Navigating the parent scope in Angular using TypeScript

Is there a way to access the parent Controller's scope from within the TypeScript class? Here is the code snippet: export class EntityOverviewCtrl extends AbstractCtrl { public static $inject = ["$state", "$http", "CurrentSession"]; publi ...

Do you know of any resources that provide tutorials on utilizing Epics within Redux Observables?

I've searched extensively for a comprehensive tutorial on epics, but haven't found one yet. const pingEpic = action$ => action$.filter(action => action.type === 'PING') .delay(1000) // Wait asynchronously for 1000ms before ...

Efficiently loading Angular Material components in feature modules

Currently, my Angular module named MyAngularModule looks like this: /app/material/material.module.ts import { MatButtonModule, MatIconModule } from '@angular/material'; const MaterialComponents = [ MatButtonModule, MatIconModule, ... ]; @ ...

npm error: JSON input unexpectedly ended while parsing

Encountered an error when running ng new project-name in my Angular project. npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor. npm ERR! Unexpected end of JSON input while parsing near '...: ...

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

Encountering a NullInjectorError in Angular while utilizing dynamic module federation when importing a standalone component along with

My main goal is to develop a shell application acting as a dashboard without routing, featuring multiple cards with remote content (microfrontend standalone component). I have been following a tutorial that aligns closely with my requirements: . The reas ...

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

The default value retrieved from an HTTP API and stored in a BehaviorSubject within a service

In my service, I am having an issue with getting the default value using a get HTTP request on a BehaviorSubject. Here is part of my code: defaultItems!: ColumnsToFilterWithItems[]; columnsToFilterWithItemsBehaviorSubject: BehaviorSubject<ColumnsToFilte ...

Google Social Authentication with Angular + Angular Security Guards

Currently, I am working on incorporating an Angular Guard utilizing the Angular Social Login npm package: @Injectable({ providedIn: 'root', }) export class LoginGuard implements CanActivate { constructor(private router: Router, private authSe ...

What are the steps to validate a form control in Angular 13?

My Angular 13 application has a reactive form set up as follows: https://i.sstatic.net/LE219.png I am trying to validate this form using the following approach: https://i.sstatic.net/gxpgN.png However, I encountered the following error messages: https:// ...

Delete the right-hand p-timeline-event-opposite margin from the Angular 17 PrimeNG Timeline

I am currently utilizing the PrimeNG Timeline module to showcase a few straightforward horizontal timelines with content placed on the top side in a table format. How can I eliminate the space allocated by the .p-timeline-event-opposite section? Upon inspe ...

Maximizing the potential of process.hrtime.bigint

Whenever I include the following code: const a = process.hrtime.bigint(); The linter says it's okay, but during compilation, I encounter this error message: error TS2339: Property 'bigint' does not exist on type 'HRTime'. This ...

What should be the proper service parameter type in the constructor and where should it be sourced from?

Currently, I am faced with a situation where I have two Angular 1 services in separate files and need to use the first service within the second one. How can I properly type the first service in the constructor to satisfy TypeScript requirements and ensure ...

Eliminate text from template literals in TypeScript types

I have successfully created a function that eliminates the 'Bar' at the end of a string when using foo. However, is there a way to achieve the same result using the type statement? (refer to the code snippet below) declare function foo<T exten ...

The behavior of the input in React-bootstrap-daterangepicker is acting strangely

I'm encountering an issue while trying to integrate react-bootstrap-datepicker with input fields. The problem arises when I click on one of the inputs or press a key, causing the calendar to toggle (showing if hidden and vice versa). To reproduce this ...

The module called "discord.js" does not have a component named "Intents" available for export

Issue with importing module '"discord.js"' - 'Intents' not exported. Here is the code in question: import dotenv from 'dotenv'; const bot = new Client({ intents: [ Intents.FLAGS.GUILDS, Intents. ...

Using template references in ViewChildren

I'm facing an issue trying to utilize ViewChildren to create a QueryList from TemplateRef, but I am unable to pass it to the input component. For instance: Component.ts: @ViewChildren(TemplateRef) cellTemplates: QueryList<TemplateRef<any>& ...