Nurturing Palpable Magnificence

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

    0.0.17 • 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

    Install

    npm i ngx-mat-calendar

    DownloadsWeekly Downloads

    9

    Version

    0.0.17

    License

    MIT

    Unpacked Size

    1.62 MB

    Total Files

    33

    Last publish

    Collaborators

    • saujanya