CODEWITHSUNDEEP
angularangular-material
Curtis
Curtis

Reputation: 3449

Angular Material Datepicker will not work for me

Im trying to use the date picker. I have no issue with the checkbox or radio buttons. But when I try and add the date picker I always get this error:

Error: Template parse errors: Can't bind to 'htmlFor' since it isn't a known property of 'md-datepicker-toggle'

in my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MdButtonModule, 
    MdCheckboxModule,
    MdCardModule,
    MdRadioModule, 
    MdDatepickerModule } from '@angular/material';

import { AppComponent } from './app.component';
import { WeekControlComponent } from './week-control.component';

@NgModule({
declarations: [
  AppComponent,
  WeekControlComponent
],
imports: [
   BrowserModule, 
   FormsModule,
   MdButtonModule, 
   MdCheckboxModule, 
   MdCardModule, 
   MdRadioModule,
   MdDatepickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

And I have a WeekControlComponent:

HTML 
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
TS 
  import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'app-week-control',
    templateUrl: './week-control.component.html',
    styleUrls: ['./week-control.component.css']
  })
  export class WeekControlComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }
  }

I copied the example straight from the angular.io material examples page. I dont understand why its not working. Can someone please help me here?

Upvotes: 4

Views: 5756

Answers (2)

Kriti
Kriti

Reputation: 2393

If you using material version 2.0.0-beta.8 then you need to do the following changes:-

  1. Replace code in HTML File

    <md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

2.Add one more module in app.module i.e. MdNativeDateModule 

import { MdButtonModule, 
MdCheckboxModule,
MdCardModule,
MdRadioModule, 
MdDatepickerModule, 
MdNativeDateModule   } from '@angular/material';


 imports: [
  BrowserModule, 
FormsModule,
MdButtonModule, 
MdCheckboxModule, 
MdCardModule, 
MdRadioModule,
MdDatepickerModule,
MdNativeDateModule

],

Upvotes: 5

sandeepchhapola
sandeepchhapola

Reputation: 86

Just install latest angular dependencies. i.e.

"@angular/animations": "4.3.0",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "4.3.0",
"@angular/compiler": "4.3.0",
"@angular/core": "4.3.0",
"@angular/forms": "4.3.0",
"@angular/http": "4.3.0",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "4.3.0",
"@angular/platform-browser-dynamic": "4.3.0",
"@angular/platform-server": "4.3.0",
"@angular/router": "4.3.0"

devDependencies:
"@angular/compiler-cli": "4.3.0"

And test your code. It works fine for me.

Upvotes: 3

Related Questions