1

This seems to be a common issue, but none of the posts I found helped me with this problem. I've coded the angular date-picker into my html component and don't have anything in the css files, but I can't type in a date, the cursor in the input never appears and the calendar icon never appears. I can click where the calendar icon is supposed to be and a calendar does pop up, but it doesn't have the title headers where you can change the month and year.

I'm pretty sure the code is right because when I tried it on stackblitz it worked fine. My guess is there is something with the way I have my angular project setup. Any ideas?

I've imported FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatNativeDateModule, MatRippleModule, MatIconModule, which I think is everything.

My package.json has @angular/material:^13.3.9, which should be the latest.

   <!DOCTYPE html>
<html>
<div *ngIf="isSignedIn">

    <mat-form-field appearance="fill">
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-hint>MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matIconSuffix [for]="picker" style="background:blue"></mat-datepicker-toggle>
        <mat-datepicker #picker color="primary"></mat-datepicker>
      </mat-form-field>
      

</div>
</html>

<div *ngIf="!isSignedIn">
    <app-login></app-login>
</div>

This is what I've looked into and I have tried everything on these pages with no luck.

  1. Angular Material Date-Picker is not working properly
  2. Angular matdatepicker is not displaying like it should
  3. Angular Material Datepicker won't show in the page 4.https://stackoverflow.com/questions/74824227/angular-material-datetime-picker-not-showing-icons

Any more ideas?

Screenshot of date-picker

Screenshot of calendar

elements screenshot (layers?) matIconSuffix

elements above input

rawmud
  • 70
  • 9
  • open the tools F12 and see if you have a "layer" over the input (if you make cclikc and don't select the input this is the problem). BTW I'm not pretty sure if is `matSufix` -as you has wrote- or `matIconSuffix` – Eliseo Apr 18 '23 at 14:22
  • @Eliseo, can you specify what you mean by 'layer. I attached a screenshot of the elements when I select on the box. It looks like there is the input at the top, followed by the label and then the date-picker-toggle. When I use matIconSuffix, it moves the calendar icon below the input field and it is still invisible, I still can't type in the input field and the blue background is removed. – rawmud Apr 18 '23 at 14:47
  • If you have a div with background-transparent above the input, you can not "click" inside the input -you click in the "div"- – Eliseo Apr 18 '23 at 16:27
  • @Eliseo, I added a screenshots of the elements above the input element. I guess the ng-tns-c121-0 is a transparent div? How do I get rid of it. I had my date-picker nested inside a div but its just to implement a login feature. I added the full snippet of the html component. Where is this transparent div coming from and how do I get rid of it? – rawmud Apr 18 '23 at 18:44
  • NOT, the ng-tns-s121-0 is related to you *ngIf. Try add in .css `@import "~@angular/material/prebuilt-themes/indigo-pink.css"` to be sure is not problem about the .css. NOTE: Really I don't know what it's happened – Eliseo Apr 19 '23 at 06:18

0 Answers0