ngx-mat-calendar

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.

Installation

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';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    
    // Specify this library as an import
    NgxMatCalendarModule,
  ],
  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.compose(
    [
      Validators.required, DateValidators.dateBetween(new Date(2020,1,1), new Date(2020,12,31))
    ]
    )
  );

  dateChanged(event:any){
      console.log(event);
  }
}

<ngx-date 
    [formControl]="control" 
    placeholder="Date of Birth" 
    [dateType]="dateType" 
    [dateFormatAD]="dateFormatAD"
    [dateFormatBS]="dateFormatBS"
     (onDateChanged)="dateChanged($event)
>
</ngx-date>

output

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

{
    start:{
        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