How To Change Datepicker Start Date In Angular 15

Websolutionstuff | Jul-03-2023 | Categories : Angular

In this tutorial, I will guide you through the process of changing the start date of a datepicker component in Angular 15. The datepicker is an essential element that enables users to select dates conveniently.

In this tutorial, I will explain each step in detail, allowing you to confidently change the start date of your datepicker component in Angular 15.

We will cover the installation of Angular Material, importing the necessary modules, creating a datepicker component, and finally, implementing the change of the start date.

However, there are instances when we need to customize the initial start date based on specific requirements. With the power of Angular 15, we can easily modify the start date of the datepicker component and provide a more personalized user experience.

Table of Contents:

  1. Prerequisites
  2. Install Angular Material
  3. Import Angular Material Modules
  4. Create Datepicker Component
  5. Change Start Date
  6. Run Angular 15 Application
  7. Conclusion

So, let's get started and explore how to change the start date in date picker in Angular 15 using the powerful Angular Material library.

Step 1: Prerequisites

Before we begin, make sure you have a working Angular 15 application set up on your machine. Additionally, ensure that you have the necessary dependencies installed, including Angular Material and its corresponding CSS styles.


Step 2: Install Angular Material

To add Angular Material to your project, run the following command in your terminal.

npm install @angular/material@15 @angular/cdk@15


Step 3: Import Angular Material Modules

In the component file (app.module.ts), import the required Angular Material modules.

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

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

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

import { MatFormFieldModule } from '@angular/material/form-field';

import { ReactiveFormsModule } from '@angular/forms';



  declarations: [



    imports:      [






    ReactiveFormsModule ],

  providers: [],

  bootstrap: [AppComponent]


export class AppModule { }


Step 4: Create Datepicker Component

Create a new component that will contain your datepicker. For example, you can create a DatepickerComponent using the Angular CLI.

ng generate component Datepicker


Step 5: Change Start Date

In your DatepickerComponent template file, add the datepicker component and modify its start date.

<div class="container" style="margin:70px;">
	<h2>How To Change Datepicker Start Date In Angular 15 Material - Websolutionstuff</h2>
	<mat-form-field appearance="fill">
		<mat-label>Choose a date</mat-label>
		<input matInput [matDatepicker]="picker">
		<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
		<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>

In your DatepickerComponent class file, define the customStartDate property and assign it the desired start date.

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

/** @title Datepicker start date */
  selector: 'app-datepicker',
  templateUrl: 'datepicker.component.html',
  standalone: true,
  imports: [MatFormFieldModule, MatDatepickerModule, MatNativeDateModule],
export class DatepickerComponent {
  startDate = new Date(1990, 0, 1);


Step 6: Run Angular 15 Application

Start the Angular development server using the ng serve command and open the app in your browser.

ng serve




Step 7: Conclusion

By following this step-by-step guide, you have learned how to change the start date of a datepicker component in Angular 15. Customizing the start date allows you to control the initial date displayed to users and align it with your application's specific requirements.


You might also like:

Recommended Post
Featured Post
How To Create Multi Language Website In Laravel 9
How To Create Multi Language W...

In this article, we will see how to create a multi language website in laravel 9. In this example, we will see the...

Read More


How To Install Python On Ubuntu
How To Install Python On Ubunt...

In this article, we will see how to install python on ubuntu. Python is a popular programming language. P...

Read More


How To Get Last 30 Days Record In Laravel 8
How To Get Last 30 Days Record...

in this tutorial, we see how to get last 30 days record in laravel 8. You can simply get the last 30 days reco...

Read More


How To Generate QR Code In Angular 13
How To Generate QR Code In Ang...

In this article, we will see how to generate QR code in angular 13. In this example, we will use the angularx-qrcod...

Read More