NgRangeCalendar

NgRangeCalendar is a library based on SaturnDatepicker and Angular Material Datepicker

Dependence

Your project must install

• Angular Material
• Moment

npm i -S @angular/animations@^5.2.4 @angular/cdk@^5.2.4 @angular/material-moment-adapter@^6.2.1 moment

Install

npm i ng-range-calendar -S

Basic Usage

import { NgRangeCalendarModule } from './modules/ng-range-calendar/ng-range-calendar.module';

@NgModule({
  imports: [
    NgRangeCalendarModule,
    
    // ...
  ],
  
  // ...
})

Localize

Eg: Japanese Calendar

import { MAT_DATE_LOCALE } from '@angular/material/core';

@NgModule({
  providers: [
      {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},
  ],
})

Format

We can define display format look like this:

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_FORMATS = {
    parse: {
        dateInput: 'MM/YYYY',
    },
    display: {
        dateInput: 'MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

@NgModule({
  providers: [
      {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})

Running the Sample

git clone https://github.com/hungnt167/ng-range-calendar
cd ng-range-calendar
npm i
npm start

Cheer :v