Angular MyDatePicker show or hide calendar window on button click

This post will explain you how to show/hide "MyDatePicker" calendar window programmatically on button click

We have so many datepicker  packages available in angular , depending upon the requirement and need, you need to choose the specific package. 

In this post we will talk about "MyDatePicker". it is very simple and easy to use.

"MyDatePicker" has so many built in options available so we can customize the datepicker as per our requirement.


some of the options are..




you can find complete list of options here...


To show/hide calendar window programmatically follow the below steps...

(1) Add MyDatePickerModule in 'app.module.ts'

 import { MyDatePickerModule } from 'mydatepicker';

    imports:      [ BrowserModule, MyDatePickerModule ],
    declarations: [ ... ],
    bootstrap:    [ ... ]


(2) Add 'IMyDpOptions' in 'app.component.ts' and write the following code.

import { Component } from '@angular/core';
import { IMyDpOptions } from 'mydatepicker';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

export class AppComponent {

  public startDateOptions: IMyDpOptions = {
    dateFormat: 'mm-dd-yyyy'

  private calenderSelector: number = 0;

  toggleCalender() {


(3) Finally Add the below code in "app.component.html".

<div class="content">
  welcome to home page

<div class="col-md-4">
        <div class="form-group">
            [(ngModel)]="startDate" required>

<button class="btn btn-primary btn-sm" (click)="toggleCalender()">Toggle Datepicker</button>


Labels: MyDatePicker toggle calender window on button click


Receive Quality Tutorials Straight in your Inbox by submitting your Email below:

Delivered by FeedBurner

Protected by Copyscape Duplicate Content Checker