AppDividend
Latest Code Tutorials

Angular Datepicker Example Tutorial

1,112

Get real time updates directly on you device, subscribe now.

Angular Datepicker Example Tutorial is today’s leading topic.  The Datepicker allows us to enter a date either through the text input or by choosing the date from a calendar. It is made up of various components and directives that work together. Angular Material is ground running with large, modern UI components that work across the web, mobile, and desktopAngular Material components will help us in constructing attractive UI and UX, consistent, and functional web pages and web applications while keeping to modern web design principles like browser portability and compatibility, device independence, and graceful degradation.

Angular Datepicker Example Tutorial

First, we need to install Angular. We are using Angular CLI to install the Angular. Right now, Angular 6 is the latest. So if you have not installed Angular CLI then install it using the following command.

#1: Install Angular CLI on Mac

Type the following command.

npm install -g @angular/cli

Now, generate the Angular project using the following command.

ng new datepicker

 

Angular Datepicker Example Tutorial

#2: Install other libraries.

Go into the project and install the hammerjs using the following command.

npm install --save hammerjs

Hammer.js is the optional dependency and helps with touch support for a few of the components.

Now, install Angular Material and Angular Animations using the following command.

npm install --save @angular/material @angular/animations @angular/cdk

Now, include hammerjs inside the angular.json file. You can find this file on the root of the project.

#3: Import a pre-built theme and Material icons.

Angular Material comes with some pre-built themes. These themes have set off the colors and basic styling. The main available themes are indigo-pinkdeeppurple-amberpurple-green and pink-bluegrey.

To import the theme, you can add the following code to your global styles.css file. The file is inside src folder.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

You can also have access to the Material Design icons and use named icons with the <mat-icon> component. To import them to your project, you can add this to the head section of your project’s root index.html file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Datepicker</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <app-root></app-root>
</body>
</html>

#4: Create a Custom Material Module File.

Inside src >> app folder, create one file called material.module.ts and add the following code.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material';

@NgModule({
  imports: [
    MatDatepickerModule
  ],
  exports: [
    MatDatepickerModule
  ]
})

export class MaterialModule {}

Here, we have imported MatDatepickerModule, MatNativeDateModule, and other components that we need in our Angular Datepicker Example App. We can add additional components in the future if we need to. The reason this file is written on its own is that it is easy to include all the Material components in this file and then this file will be imported inside the app.module.ts.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule,
        MatNativeDateModule,
        MatFormFieldModule,
        MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  exports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  providers: [ MatDatepickerModule ],
})

export class MaterialModule {}

#5: Import MaterialModule in an app.module.ts file.

Import MaterialModule inside app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, finally write the Datepicker HTML code inside the app.component.html file.

<!-- app.component.html -->

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

Save the file and go to a terminal or cmd and start Angular Development Server.

ng serve --open

 

Angular Datepicker Example

Related Posts
1 of 12

Go to the browser, and you will see something like below image.

 

Angular 6 Datepicker Example Tutorial

#Connecting a datepicker to an input

A datepicker is composed of text input and a calendar pop-up, connected via the matDatePicker property on the text input.

<input [matDatepicker]="myDatepicker">
<mat-datepicker #myDatepicker></mat-datepicker>

There is an optional datepicker toggle button is available. The toggle button can be added to the example above:

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

It works the same with an input that is part of a <mat-form-field> and a toggle button can easily be used as a prefix or suffix on the material input:

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

#Setting the calendar starting view

The startView property of <mat-datepicker> could be used to set the look that will show up when the calendar first opens. It can be configured to monthyear, or multi-year; by default, it will begin to month view.

A month, year, or range of years that a calendar opens to is determined by first checking if any date is currently selected and if so it will open to a month or year containing that date. Otherwise, it will open in a month or year containing today’s date. This behavior can be easily overridden by using the startAt property of <mat-datepicker>. In this case, a calendar will open to the month or year containing the startAt date.

<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>

 

Angular Material Datepicker Example Tutorial

Finally, our Angular Datepicker Example Tutorial is over. Thanks for taking. You can use the following Github code for this Angular Datepicker Example Tutorial.

Github Code

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.