Angular Datepicker Example

In this example I will show you how to implement basic Angular + material2 datepicker. The result of angular sample datepicker is displayed in header image.

How Does It Work

Using datepicker is pretty easy and straight forward. All you have to do is use correct template directives in you html view.

	<md-form-field>
	<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
	<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
	<md-datepicker #picker></md-datepicker>
	</md-form-field>

view raw app.component.ts hosted with by GitHub

And then import all needed dependencies in app.module. This can be little tricky, but you find out really easy which dependency are you missing in error message and then you can just add it to imports.

	import {BrowserModule} from '@angular/platform-browser';
	import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
	import {NgModule, LOCALE_ID} from '@angular/core';
	import {CommonModule} from '@angular/common';
	import {
	MdDatepickerModule,
	MdIconModule,
	MdInputModule,
	MdToolbarModule,
	MdNativeDateModule,
	} from '@angular/material';
	import {AppComponent} from './app.component';
	/**
	* NgModule that includes MaterialModule and other necessary imports
	*/
	@NgModule({
	imports: [
	BrowserModule,
	CommonModule,
	MdDatepickerModule,
	MdIconModule,
	MdInputModule,
	MdToolbarModule,
	MdNativeDateModule,
	BrowserAnimationsModule
	],
	declarations: [AppComponent],
	bootstrap: [AppComponent],
	providers: [
	{provide: LOCALE_ID, useValue: 'en-GB'}, // Here change datepicker locale
	]
	})
	export class AppModule {}
	/*
	Copyright 2016 Google Inc. All Rights Reserved.
	Use of this source code is governed by an MIT-style license that
	can be found in the LICENSE file at http://angular.io/license
	*/

view raw app.module.ts hosted with by GitHub

Important

Angular material team has changed the prefix from md -> mat. So depending on your version you may need to replace md prefix with mat prefix.

Notice the providers part with {provide: LOCALE_ID, useValue: ‘en-GB’},. Here you can change your datepicker default locale. The default date format is set to USA date with slashes. So for displaying dots instead of slashes in date. Set the useValue: to ‘de-DE’ for example. Complete list of available locales is here.

And that’s it! Here is the plunker with the example: