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

0.0.23 • Public • Published

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

Package Sidebar

Install

npm i ngx-mat-calendar

Weekly Downloads

25

Version

0.0.23

License

MIT

Unpacked Size

1.65 MB

Total Files

33

Last publish

Collaborators

  • saujanya