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