Ngx-multiple-dates NPM

Angular Multiple Dates

Multiple dates picker based on Angular Material.

Example

Demo

Installation

Install dependency:

npm install --save ngx-multiple-dates

Include NgxMultipleDatesModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatNativeDateModule } from '@angular/material/core';
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,
    MatDatepickerModule,
    MatIconModule,
    NgxMultipleDatesModule // import to Angular
    // ...
  ],
  // ...
})
export class AppModule { }

Styles:

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

@import 'ngx-multiple-dates/prebuilt-themes/indigo-pink.css';

Or you can use custom SCSS theme:

@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

// ...

Available pre-built themes:

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.css

Dependencies

Angular
Angular CDK
Angular Material
RxJs

Examples

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

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>`	The datepicker that this `ngx-multiple-dates` element is associated with.
`@Input()color: ThemePalette`	Theme color palette for the component.
`@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()id: string`	Unique id of the element.
`@Input()errorStateMatcher`: ErrorStateMatcher	An object used to control when error messages are shown. Color palette to use on the datepicker's calendar.
Output
`@Output()dateChange: EventEmitter<MatDatepickerInputEvent<D>>`	Emits when a change event is fired on this `ngx-multiple-dates` element.
Properties
`resetModel: Date`	Model used to reset datepicker selected value, so unselect just selectad 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.