CODEWITHSUNDEEP
angularangular-material
Rasindu De Alwis
Rasindu De Alwis

Reputation: 149

Angular Material Date-Picker is not working properly

I am trying to get date using Angular Material datepicker as mentioned bellow,

In html

<mat-form-field>
<mat-label>Custom calendar color</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

In app.module.ts

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material';

imports: [
  MatDatepickerModule,
  MatNativeDateModule
],

In my package.json

"dependencies": { "@angular/animations": "^8.2.9", "@angular/cdk": "^8.2.3",
"@angular/core": "~8.2.0",
"@angular/material": "^8.2.3",
"@angular/router": "~8.2.0", "angular-mat-datepicker": "0.0.2", "angular-material-datepicker": "^1.0.2",
"hammerjs": "^2.0.8", "ng-material-datetimepicker": "^1.19.2",
},

But the date picker icon is not working, even icon is not showing in the view. I have updated Angular material version as well but that didn't work. What is the solution for this problem?

Upvotes: 9

Views: 44948

Answers (8)

Amirouche
Amirouche

Reputation: 3766

you should import all of this following in 'app.module.ts'

import {Component} from '@angular/core';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';

Upvotes: 1

Er.Manoj Singh
Er.Manoj Singh

Reputation: 31

Also import this link:

import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';

Upvotes: 2

Richard Lovell
Richard Lovell

Reputation: 888

In my case it was (weirdly) that the z-index of the datepicker's overlay was too high, meaning that any click on the datepicker was actually just clicking on the overlay. Lowering the z-index of it fixed the problem:

.cdk-overlay-backdrop {
    z-index: 100; //instead of z-index: 1031;
}

Upvotes: 0

Rasindu De Alwis
Rasindu De Alwis

Reputation: 149

This is the solution for my problem.I just run bellow code and now everything works fine as I expected,

ng add @angular/material

Upvotes: 1

Mustafa Kunwa
Mustafa Kunwa

Reputation: 867

import {MatIconModule} from '@angular/material/icon';

try this

Upvotes: 0

sibabrat swain
sibabrat swain

Reputation: 1368

I have used material datepicker in angular 7. Go through this and hope it will resolve your issue. 

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {MatDatepicker} from '@angular/material';

@Component({
selector: 'app-date',
template: `

    <mat-form-field class="demo-full-width margin-top" [formGroup]="group">
        <input matInput [matDatepicker]="picker" (dateChange)="saveRange()"
               formControlName="datePicker" placeholder="Select Date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

`,
styles: [],
})

export class DateComponent implements OnInit {

group: FormGroup;

constructor() {
}

ngOnInit() {
}

saveRange() {
    console.log(this.group.value);
}

}

Upvotes: 0

shaktimaan
shaktimaan

Reputation: 1857

You also have to import MatFormFieldModule and MatInputModule to get it working.

Also don't forget to import BrowserAnimationsModule. Check out this StackBlitz

Upvotes: 11

Jobje325
Jobje325

Reputation: 55

You might be missing the startView and/or [startAt] attribute, this is how the Angular docs suggest to build up a simple datepicker in your html:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

Upvotes: 0

Related Questions