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.

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.

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: