Skip to content

lekhmanrus/ngx-multiple-dates

Repository files navigation

Angular Multiple Dates

Angular Multiple Dates Logo
Multiple dates picker based on Angular Material.
Compatible with Angular / CDK / Material **>= 9.x.x**. See Versioning.

Demo

Build Publish codecov npm version npm

Example


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

Name Description
Input
@Input()
value: D | null
The value of the ngx-multiple-dates control.
@Input()
matDatepicker: MatDatepicker<D> | MatCalendar<D>
The datepicker (or calendar - for inline view) that this ngx-multiple-dates element is associated with.
@Input()
color: ThemePalette
Theme color palette for the component. This API is supported in M2 themes only, it has no effect in M3 themes.
For information on applying color variants in M3, see Using component color variants.
@Input()
placeholder: string
Placeholder to be shown if no value has been selected.
@Input()
required: boolean
Whether the component is required.
@Input()
disabled: boolean
Whether the component is disabled.
@Input()
matDatepickerFilter: (date: D) => boolean
Function that can be used to filter out dates within the datepicker.
@Input()
max: D | null
The maximum valid date.
@Input()
min: D | null
The minimum valid date.
@Input()
classes: Array<DateClass<D>>
Custom date classes.
@Input()
id: string
Unique id of the element.
@Input()
errorStateMatcher: ErrorStateMatcher
An object used to control when error messages are shown.
@Input()
format: string
The date/time components to include, using predefined options or a custom format string.
See DatePipe Usage notes for more information.
Output
@Output()
dateChange: EventEmitter<MatDatepickerInputEvent<D>>
Emits when a change event is fired on this ngx-multiple-dates element.
@Output()
remove: EventEmitter<DateRemoveEvent<D>>
Emits on a date removal.
Properties
resetModel: Date Model used to reset datepicker selected value, so unselect just selected date will be possible.
closeOnSelected: boolean Whether datepicker should be closed on date selected, or opened to select more dates.
empty: boolean Whether the select has a value.
shouldLabelFloat: boolean Whether the MatFormField label should try to float.
focused: boolean Whether ngx-multiple-dates element has focus.
errorState: boolean Whether the control is in an error state.
stateChanges: Observable<void> Stream that emits whenever the state of the control changes such that the parent MatFormField needs to run change detection.
ngControl: NgControl Form control to manage component.
controlType: 'ngx-multiple-dates' A name for this control that can be used by mat-form-field.

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.

Parameters
ids: string[] Ids to set.
  • onContainerClick
    Handles a click on the control's container.

  • validate
    Performs synchronous validation for the control.

Parameters
control: AbstractControl The control to validate against.
Returns
ValidationErrors | null A map of validation errors if validation fails, otherwise null.
  • dateClass
    Function used to add CSS classes to selected dates.
Parameters
date: D Date to check if classes should be applied.
Returns
MatCalendarCellCssClasses CSS classes to apply.
  • dateChanged
    Fires when a change event is fired on the datepicker <input />.
Parameters
event: MatDatepickerInputEvent<D> Change event.
  • remove
    Removes selected chip from the list.
Parameters
date: D Value to remove.

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.