Nurturing Palpable Magnificence

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.17 • Public • Published


    This library was generated with Angular CLI version 10.1.5.

    Angular datepicker component based on Angular Material with min-max date validation and also support nepali calendar (BS) also convert date from BS to AD and AD to BS.


    To install this library (component), run:

    Using npm:

    $ npm install ngx-mat-calendar

    Consuming this library (Component)

    You can import this library (component) in any Angular application by running:

    $ npm install ngx-mat-calendar

    and then from your Angular AppModule

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    // Import this library
    import { NgxMatCalendarModule } from 'ngx-mat-calendar';
      declarations: [
      imports: [
        // Specify this library as an import
      providers: [],
      bootstrap: [AppComponent]
    export class AppModule { }

    Once this library is imported, you can use its components, directives and pipes in your Angular application:

    import { DateFormat, DateType, DateValidators  } from 'ngx-mat-calendar';
    export class AppComponent {
      title = 'MatCalendar';
      dateType = DateType.BS
      dateFormatBS  = DateFormat.MMddyyyy;
      dateFormatAD = DateFormat.yyyyMMdd;
      control = new FormControl(new Date(2020, 10, 12), 
          Validators.required, DateValidators.dateBetween(new Date(2020,1,1), new Date(2020,12,31))
        placeholder="Date of Birth" 


    if isRange = false

    date: Wed Feb 05 2020 00:00:00 GMT+0545 (Nepal Time) {}
    dateAD: "2020-02-05"
    dateBS: "10-22-2076"
    selectedDateType: 2

    if isRange = true

            date: Thu Sep 17 2020 00:00:00 GMT+0545 (Nepal Time) {}
            dateAD: "2020-09-17"
            dateBS: "06-01-2077"
            selectedDateType: 2
    ,   end: {
            date: Thu Sep 24 2020 00:00:00 GMT+0545 (Nepal Time) {}
            dateAD: "2020-09-24"
            dateBS: "06-08-2077"
            selectedDateType: 2

    value of the control is date if the isRange = false else same as output

    ##Component Inputs and Outputs

    Attribute Type Required Description Default
    placeholder string no placeholder of control "Date"
    dateType DateType no if datetype = AD default display in AD else BS AD
    dateFormatAD DateFormat no Select AD date format from given 4 format ddMMyyyy
    dateFormatAD DateFormat no Select BS date format from given 4 format ddMMyyyy
    language number {0 or 1} no 0 = english language and 1 = nepali language 0
    isRange boolean no To pick date range this value must be true false
    withTime boolean no To Select time also this value must be true false
    readonly boolean no make coomponent readonly if value = true else not false
    disabled boolean no enable or disable the control false
    closeOnClick boolean no if true popup will hide when select a date true
    formControl FormControl yes formControlName for reactive form and formControl object for template driven null


    npm i ngx-mat-calendar

    DownloadsWeekly Downloads






    Unpacked Size

    1.62 MB

    Total Files


    Last publish


    • saujanya