Installation

1. Install dependency:

   npm install --save ngx-multiple-dates
   

2. Include NgxMultipleDatesModule to your module:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   // Any of the supported date adapter should be imported. For more details - see
   // https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings
   import { MatNativeDateModule } from '@angular/material/core';
   // import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
   // import { MatLuxonDateModule } from '@angular/material-luxon-adapter';
   // import { MatMomentDateModule } from '@angular/material-moment-adapter';
   
   import { MatDatepickerModule } from '@angular/material/datepicker';
   import { MatIconModule } from '@angular/material/icon';
   import { NgxMultipleDatesModule } from 'ngx-multiple-dates'; // module import
   
   @NgModule({
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
       MatNativeDateModule, // any of the supported date adapter should be imported
       MatDatepickerModule,
       MatIconModule,
       NgxMultipleDatesModule // import to Angular
       // ...
     ],
     // ...
   })
   export class AppModule { }
   

3. Styles:

   • Add one of the prebuilt themes to angular.json or your styles file:

     @import 'ngx-multiple-dates/prebuilt-themes/azure-blue.css';
     

   • Or you can use custom SCSS theme

     • Angular < 12.x.x:

       @import '~@angular/material/theming';
       @import '~ngx-multiple-dates/theming'; // import library theme
       
       @include mat-core();
       // Palette
       $primary: mat-palette($mat-indigo);
       $accent:  mat-palette($mat-pink);
       
       $theme: mat-light-theme($primary, $accent); // theme
       @include angular-material-theme($theme); // apply Angular Material styles
       @include ngx-multiple-dates-theme($theme); // apply Angular Multiple Dates styles
       
       // ...
       

     • Angular >= 12.x.x && < 18.x.x:

       @use '@angular/material' as mat;
       @import '~ngx-multiple-dates/theming'; // import library theme
       
       @include mat.core;
       // Palette
       $primary: mat.define-palette(mat.$indigo-palette);
       $accent:  mat.define-palette(mat.$pink-palette);
       
       $theme: mat.define-light-theme($primary, $accent); // theme
       @include mat.all-component-themes($theme); // apply Angular Material styles
       @include ngx-multiple-dates-theme($theme); // apply Angular Multiple Dates styles
       
       // ...
       

     • Starting Angular Multiple Dates = 14.x.x SASS @use rule supported:

       @use '@angular/material' as mat;
       @use 'ngx-multiple-dates' as ngxMultipleDates; // use library theme
       
       @include mat.core;
       // Palette
       $primary: mat.define-palette(mat.$indigo-palette);
       $accent:  mat.define-palette(mat.$pink-palette);
       
       $theme: mat.define-light-theme($primary, $accent); // theme
       @include mat.all-component-themes($theme); // apply Angular Material styles
       @include ngxMultipleDates.multiple-dates-theme($theme); // apply Angular Multiple Dates styles
       
       // ...
       

     • Angular Multiple Dates >= 15.x.x && < 18.x.x:

       @use '@angular/material' as mat;
       @use 'ngx-multiple-dates' as ngxMultipleDates; // use library theme
       
       @include mat.core;
       // Palette
       $primary: mat.define-palette(mat.$indigo-palette);
       $accent:  mat.define-palette(mat.$pink-palette);
       
       $theme: mat.define-light-theme((
         color: (
           primary: $primary,
           accent: $accent
         )
       )); // theme
       @include mat.all-component-themes($theme); // apply Angular Material styles
       @include ngxMultipleDates.multiple-dates-theme($theme); // apply Angular Multiple Dates styles
       
       // ...
       

     • Angular Multiple Dates >= 18.x.x:

       @use '@angular/material' as mat;
       @use 'ngx-multiple-dates' as ngxMultipleDates; // use library theme
       
       @include mat.core;
       // Theme
       $my-theme: mat.define-theme(
         (
           color: (
             theme-type: light,
             primary: mat.$azure-palette,
             tertiary: mat.$blue-palette
           ),
           density: (
             scale: 0
           )
         )
       );
       @include mat.all-component-themes($theme); // apply Angular Material styles
       @include ngxMultipleDates.multiple-dates-theme($theme); // apply Angular Multiple Dates styles
       
       // ...
       

Available pre-built themes:

• azure-blue.css
• cyan-orange.css
• magenta-violet.css
• rose-red.css

Versioning

Library tested for Angular / CDK / Material versions >= 9.x.x.

Use Angular Multiple Dates 1.x.x for Angular Components <= 11.x.x

Later versions are consistant with major Angular Components version. E.g.:

Use v13.x.x with Angular Components 13.x.x.

Use v12.x.x with Angular Components 12.x.x.

Dependencies

• Angular
• Angular CDK
• Angular Material
• RxJs

Examples

Date Picker

<mat-form-field>
  <ngx-multiple-dates [matDatepicker]="picker" placeholder="Excluded Dates" name="excludedDates"
                      [(ngModel)]="model">
  </ngx-multiple-dates>
  <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Calendar (inline)

<mat-form-field class="full-width">
  <ngx-multiple-dates [matDatepicker]="picker" placeholder="Excluded Dates"
                      name="excludedDates" [(ngModel)]="excludedDates">
  </ngx-multiple-dates>
</mat-form-field>
<mat-calendar #picker></mat-calendar>

More

For more examples please visit the Demo page. Its source code is located here.

API reference

MultipleDatesComponent<D = Date>

Selector: ngx-multiple-dates

Exported as: ngxMultipleDates

Properties

Methods

• focus Focuses the ngx-multiple-dates element.

• blur Used to leave focus from the ngx-multiple-dates element.

• setDescribedByIds Sets the list of element IDs that currently describe this control.

• onContainerClick Handles a click on the control's container.

• validate Performs synchronous validation for the control.

• dateClass Function used to add CSS classes to selected dates.

• dateChanged Fires when a change event is fired on the datepicker <input />.

• remove Removes selected chip from the list.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Development server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.