lekhmanrus / ngx-multiple-dates

Multiple dates picker based on Angular Material.

Angular Multiple Dates

Multiple dates picker based on Angular Material.

Compatible with Angular / CDK / Material >= 9.x.x. See Versioning.

Demo

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/indigo-pink.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:

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

       @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
       
       // ...

Available pre-built themes:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.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.
@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.

ngx-multiple-dates's Issues

Support Angular Components 15

Feature Description

Hi,
Can we use this package for Angular 15 ?

Use Case

No response

Can add the new feature ?

Feature Description

The chip date pipe can custom Format

Use Case

No response

Can Emit the chip removed Event?

Feature Description

Thanks for previous feature (chip date format).
This time, I want to do something when I remove chips, So can emit the chip removed Event?

Use Case

No response

Can use my custom date pipe for chip?

Feature Description

Hi,
Because I want to customize the week name.
Can add this feature?

Use Case

No response

Showing the calendar instead of button?

Feature Description

Can we show the whole calendar instead of the toggle button?

Use Case

No response

Support angular material's date implementation modules

Feature Description

I'm not sure whether it is possible, but it would be awesome to see support for angular material's date implementation modules (MatNativeDateModule , MatLuxonDateModule , MatMomentDateModule ). I see you already support native JS dates and moment, but adding support for the modules functionality means each date implementation will be supported if an adapter is available/written.

Use Case

Supporting a wide variety of date implementations besides JS dates and moment.

The ngx-multiple-dates library uses the NativeDateAdapter from Angular Material to adapt native JavaScript dates to the Angular Material datepicker. However, the NativeDateAdapter was updated in Angular Material 14.0.0 to use the getFullYear method instead of the getYear method

Feature Description

ERROR TypeError: date.getFullYear is not a function
at _NativeDateAdapter.getYear (core.mjs:529:17)
at _NativeDateAdapter.compareDate (core.mjs:451:17)
at ngx-multiple-dates.mjs:569:54
at Array.map ()
at _MultipleDatesComponent._find (ngx-multiple-dates.mjs:569:23)
at _MultipleDatesComponent.dateClass (ngx-multiple-dates.mjs:445:14)
at matDatepicker.dateClass (ngx-multiple-dates.mjs:538:32)
at _MatMonthView._createWeekCells (datepicker.mjs:1560:49)
at _MatMonthView._init (datepicker.mjs:1469:10)
at Object.next (datepicker.mjs:1318:109)

Use Case

while load the dates from component we got the error

ERROR TypeError: date.getFullYear is not a function
at _NativeDateAdapter.getYear (core.mjs:529:17)
at _NativeDateAdapter.compareDate (core.mjs:451:17)
at ngx-multiple-dates.mjs:569:54
at Array.map ()
at _MultipleDatesComponent._find (ngx-multiple-dates.mjs:569:23)
at _MultipleDatesComponent.dateClass (ngx-multiple-dates.mjs:445:14)
at matDatepicker.dateClass (ngx-multiple-dates.mjs:538:32)
at _MatMonthView._createWeekCells (datepicker.mjs:1560:49)
at _MatMonthView._init (datepicker.mjs:1469:10)
at Object.next (datepicker.mjs:1318:109)

custom classes (styles) for selected dates

Hello, is it possible to add somehow custom classes to the selected dates? The case is, I want to show on the calendar different days with different colors. like this

Disable component for readonly

Feature Description

I'm using the version 13
When you have some values selected and you disable the component via the input 'disabled', the selected values are still removeable.
In disabled mode, you shouldn't be able to delete it.

Use Case

No response

Picker not work then using matDatepickerFilter