{"id":13808331,"url":"https://github.com/lekhmanrus/ngx-multiple-dates","last_synced_at":"2025-05-01T03:30:50.640Z","repository":{"id":40587512,"uuid":"237083777","full_name":"lekhmanrus/ngx-multiple-dates","owner":"lekhmanrus","description":"Multiple dates picker based on Angular Material.","archived":false,"fork":false,"pushed_at":"2025-02-14T22:53:45.000Z","size":11416,"stargazers_count":13,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T08:12:58.212Z","etag":null,"topics":["angular","angular-material","date","date-picker","datepicker","datepicker-component","hacktoberfest","material","multiple","multiple-datepicker"],"latest_commit_sha":null,"homepage":"https://lekhmanrus.github.io/ngx-multiple-dates/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lekhmanrus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-29T21:14:31.000Z","updated_at":"2025-03-05T05:15:39.000Z","dependencies_parsed_at":"2024-05-02T12:29:25.555Z","dependency_job_id":"90f1bf76-7abe-42a9-8510-5b3a6dc2b5e0","html_url":"https://github.com/lekhmanrus/ngx-multiple-dates","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-multiple-dates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-multiple-dates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-multiple-dates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekhmanrus%2Fngx-multiple-dates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lekhmanrus","download_url":"https://codeload.github.com/lekhmanrus/ngx-multiple-dates/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251817876,"owners_count":21648824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","date","date-picker","datepicker","datepicker-component","hacktoberfest","material","multiple","multiple-datepicker"],"created_at":"2024-08-04T01:01:40.303Z","updated_at":"2025-05-01T03:30:50.317Z","avatar_url":"https://github.com/lekhmanrus.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eAngular Multiple Dates\u003c/h1\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://lekhmanrus.github.io/ngx-multiple-dates/assets/icons/ngx-multiple-dates.svg\"\r\n       alt=\"Angular Multiple Dates Logo\" width=\"275px\" height=\"275px\" /\u003e\r\n  \u003cbr /\u003e\r\n  \u003cem\u003e\r\n    Multiple dates picker based on \u003ca href=\"https://material.angular.io\"\u003eAngular Material\u003c/a\u003e.\r\n    \u003cbr /\u003e\r\n    Compatible with Angular / CDK / Material **\u003e= 9.x.x**. See \u003ca href=\"#versioning\"\u003eVersioning\u003c/a\u003e.\r\n  \u003c/em\u003e\r\n  \u003cbr /\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://lekhmanrus.github.io/ngx-multiple-dates/\"\u003e\u003cstrong\u003eDemo\u003c/strong\u003e\u003c/a\u003e\r\n  \u003cbr /\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n[![Build](https://github.com/lekhmanrus/ngx-multiple-dates/actions/workflows/build.yml/badge.svg)](https://github.com/lekhmanrus/ngx-multiple-dates/actions/workflows/build.yml)\r\n[![Publish](https://github.com/lekhmanrus/ngx-multiple-dates/actions/workflows/publish.yml/badge.svg)](https://github.com/lekhmanrus/ngx-multiple-dates/actions/workflows/publish.yml)\r\n[![codecov](https://codecov.io/gh/lekhmanrus/ngx-multiple-dates/branch/master/graph/badge.svg?token=N9T5Q1CXLU)](https://codecov.io/gh/lekhmanrus/ngx-multiple-dates)\r\n[![npm version](https://img.shields.io/npm/v/ngx-multiple-dates.svg)](https://www.npmjs.com/package/ngx-multiple-dates)\r\n[![npm](https://img.shields.io/npm/dm/ngx-multiple-dates.svg)](https://www.npmjs.com/package/ngx-multiple-dates)\r\n\r\n\r\n![Example](https://raw.githubusercontent.com/lekhmanrus/ngx-multiple-dates/master/assets/animation.gif)\r\n\r\n\r\n\u003chr /\u003e\r\n\r\n\r\n\r\n## Installation\r\n\r\n1. Install  dependency:\r\n\r\n    ```sh\r\n    npm install --save ngx-multiple-dates\r\n    ```\r\n\r\n2. Include `NgxMultipleDatesModule ` to your module:\r\n\r\n    ```ts\r\n    import { NgModule } from '@angular/core';\r\n    import { BrowserModule } from '@angular/platform-browser';\r\n    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';\r\n\r\n    // Any of the supported date adapter should be imported. For more details - see\r\n    // https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings\r\n    import { MatNativeDateModule } from '@angular/material/core';\r\n    // import { MatDateFnsModule } from '@angular/material-date-fns-adapter';\r\n    // import { MatLuxonDateModule } from '@angular/material-luxon-adapter';\r\n    // import { MatMomentDateModule } from '@angular/material-moment-adapter';\r\n\r\n    import { MatDatepickerModule } from '@angular/material/datepicker';\r\n    import { MatIconModule } from '@angular/material/icon';\r\n    import { NgxMultipleDatesModule } from 'ngx-multiple-dates'; // module import\r\n\r\n    @NgModule({\r\n      imports: [\r\n        BrowserModule,\r\n        BrowserAnimationsModule,\r\n        MatNativeDateModule, // any of the supported date adapter should be imported\r\n        MatDatepickerModule,\r\n        MatIconModule,\r\n        NgxMultipleDatesModule // import to Angular\r\n        // ...\r\n      ],\r\n      // ...\r\n    })\r\n    export class AppModule { }\r\n    ```\r\n\r\n3. Styles:\r\n\r\n    * Add one of the prebuilt themes to `angular.json` or your styles file:\r\n        ```css\r\n        @import 'ngx-multiple-dates/prebuilt-themes/azure-blue.css';\r\n        ```\r\n\r\n    * Or you can use custom SCSS theme\r\n        * Angular **\u003c 12.x.x**:\r\n            ```scss\r\n            @import '~@angular/material/theming';\r\n            @import '~ngx-multiple-dates/theming'; // import library theme\r\n\r\n            @include mat-core();\r\n            // Palette\r\n            $primary: mat-palette($mat-indigo);\r\n            $accent:  mat-palette($mat-pink);\r\n\r\n            $theme: mat-light-theme($primary, $accent); // theme\r\n            @include angular-material-theme($theme); // apply Angular Material styles\r\n            @include ngx-multiple-dates-theme($theme); // apply Angular Multiple Dates styles\r\n\r\n            // ...\r\n            ```\r\n        * Angular **\u003e= 12.x.x** \u0026\u0026 **\u003c 18.x.x**:\r\n            ```scss\r\n            @use '@angular/material' as mat;\r\n            @import '~ngx-multiple-dates/theming'; // import library theme\r\n\r\n            @include mat.core;\r\n            // Palette\r\n            $primary: mat.define-palette(mat.$indigo-palette);\r\n            $accent:  mat.define-palette(mat.$pink-palette);\r\n\r\n            $theme: mat.define-light-theme($primary, $accent); // theme\r\n            @include mat.all-component-themes($theme); // apply Angular Material styles\r\n            @include ngx-multiple-dates-theme($theme); // apply Angular Multiple Dates styles\r\n\r\n            // ...\r\n            ```\r\n        * Starting Angular Multiple Dates **= 14.x.x** SASS `@use` rule supported:\r\n            ```scss\r\n            @use '@angular/material' as mat;\r\n            @use 'ngx-multiple-dates' as ngxMultipleDates; // use library theme\r\n\r\n            @include mat.core;\r\n            // Palette\r\n            $primary: mat.define-palette(mat.$indigo-palette);\r\n            $accent:  mat.define-palette(mat.$pink-palette);\r\n\r\n            $theme: mat.define-light-theme($primary, $accent); // theme\r\n            @include mat.all-component-themes($theme); // apply Angular Material styles\r\n            @include ngxMultipleDates.multiple-dates-theme($theme); // apply Angular Multiple Dates styles\r\n\r\n            // ...\r\n            ```\r\n        * Angular Multiple Dates **\u003e= 15.x.x** \u0026\u0026 **\u003c 18.x.x**:\r\n            ```scss\r\n            @use '@angular/material' as mat;\r\n            @use 'ngx-multiple-dates' as ngxMultipleDates; // use library theme\r\n\r\n            @include mat.core;\r\n            // Palette\r\n            $primary: mat.define-palette(mat.$indigo-palette);\r\n            $accent:  mat.define-palette(mat.$pink-palette);\r\n\r\n            $theme: mat.define-light-theme((\r\n              color: (\r\n                primary: $primary,\r\n                accent: $accent\r\n              )\r\n            )); // theme\r\n            @include mat.all-component-themes($theme); // apply Angular Material styles\r\n            @include ngxMultipleDates.multiple-dates-theme($theme); // apply Angular Multiple Dates styles\r\n\r\n            // ...\r\n            ```\r\n        * Angular Multiple Dates **\u003e= 18.x.x**:\r\n            ```scss\r\n            @use '@angular/material' as mat;\r\n            @use 'ngx-multiple-dates' as ngxMultipleDates; // use library theme\r\n\r\n            @include mat.core;\r\n            // Theme\r\n            $my-theme: mat.define-theme(\r\n              (\r\n                color: (\r\n                  theme-type: light,\r\n                  primary: mat.$azure-palette,\r\n                  tertiary: mat.$blue-palette\r\n                ),\r\n                density: (\r\n                  scale: 0\r\n                )\r\n              )\r\n            );\r\n            @include mat.all-component-themes($theme); // apply Angular Material styles\r\n            @include ngxMultipleDates.multiple-dates-theme($theme); // apply Angular Multiple Dates styles\r\n\r\n            // ...\r\n            ```\r\n\r\n\r\n\r\n### Available pre-built themes:\r\n\r\n* `azure-blue.css`\r\n* `cyan-orange.css`\r\n* `magenta-violet.css`\r\n* `rose-red.css`\r\n\r\n\r\n\r\n## Versioning\r\n\r\nLibrary tested for Angular / CDK / Material versions **\u003e= 9.x.x**.\r\n\r\nUse Angular Multiple Dates `1.x.x` for Angular Components `\u003c= 11.x.x`\r\n\r\nLater versions are consistant with major Angular Components version. E.g.:\r\n\r\nUse `v13.x.x` with Angular Components `13.x.x`.\r\n\r\nUse `v12.x.x` with Angular Components `12.x.x`.\r\n\r\n\r\n\r\n## Dependencies\r\n\r\n* Angular\r\n* Angular CDK\r\n* Angular Material\r\n* RxJs\r\n\r\n\r\n\r\n## Examples\r\n\r\n### Date Picker\r\n\r\n```html\r\n\u003cmat-form-field\u003e\r\n  \u003cngx-multiple-dates [matDatepicker]=\"picker\" placeholder=\"Excluded Dates\" name=\"excludedDates\"\r\n                      [(ngModel)]=\"model\"\u003e\r\n  \u003c/ngx-multiple-dates\u003e\r\n  \u003cmat-datepicker-toggle matPrefix [for]=\"picker\"\u003e\u003c/mat-datepicker-toggle\u003e\r\n  \u003cmat-datepicker #picker\u003e\u003c/mat-datepicker\u003e\r\n\u003c/mat-form-field\u003e\r\n```\r\n\r\n### Calendar (inline)\r\n\r\n```html\r\n\u003cmat-form-field class=\"full-width\"\u003e\r\n  \u003cngx-multiple-dates [matDatepicker]=\"picker\" placeholder=\"Excluded Dates\"\r\n                      name=\"excludedDates\" [(ngModel)]=\"excludedDates\"\u003e\r\n  \u003c/ngx-multiple-dates\u003e\r\n\u003c/mat-form-field\u003e\r\n\u003cmat-calendar #picker\u003e\u003c/mat-calendar\u003e\r\n```\r\n\r\n### More\r\n\r\nFor more examples please visit the [Demo](https://lekhmanrus.github.io/ngx-multiple-dates/) page.\r\nIts source code is located [here](https://github.com/lekhmanrus/ngx-multiple-dates/tree/master/projects/ngx-multiple-dates-app/src/app/components/root).\r\n\r\n\r\n\r\n## API reference\r\n\r\n### MultipleDatesComponent\u003cD = Date\u003e\r\n\r\nSelector: `ngx-multiple-dates`\r\n\r\nExported as: `ngxMultipleDates`\r\n\r\n**Properties**\r\n\r\n| Name                | Description                                                              |\r\n|---------------------|--------------------------------------------------------------------------|\r\n| **Input**           |                                                                          |\r\n| `@Input()`\u003cbr /\u003e`value: D \\| null` | The value of the `ngx-multiple-dates` control.             |\r\n| `@Input()`\u003cbr /\u003e`matDatepicker: MatDatepicker\u003cD\u003e \\| MatCalendar\u003cD\u003e` | The datepicker (or calendar - for inline view) that this `ngx-multiple-dates` element is associated with. |\r\n| `@Input()`\u003cbr /\u003e`color: ThemePalette` | Theme color palette for the component. This API is supported in M2 themes only, it has no effect in M3 themes.\u003cbr /\u003eFor information on applying color variants in M3, see [Using component color variants](https://material.angular.io/guide/theming#using-component-color-variants). |\r\n| `@Input()`\u003cbr /\u003e`placeholder: string` | Placeholder to be shown if no value has been selected.        |\r\n| `@Input()`\u003cbr /\u003e`required: boolean` | Whether the component is required.                              |\r\n| `@Input()`\u003cbr /\u003e`disabled: boolean` | Whether the component is disabled.                              |\r\n| `@Input()`\u003cbr /\u003e`matDatepickerFilter: (date: D) =\u003e boolean` | Function that can be used to filter out dates within the datepicker. |\r\n| `@Input()`\u003cbr /\u003e`max: D \\| null` | The maximum valid date.                                             |\r\n| `@Input()`\u003cbr /\u003e`min: D \\| null` | The minimum valid date.                                             |\r\n| `@Input()`\u003cbr /\u003e`classes: Array\u003cDateClass\u003cD\u003e\u003e` | Custom date classes.                                                |\r\n| `@Input()`\u003cbr /\u003e`id: string` | Unique id of the element.                                              |\r\n| `@Input()`\u003cbr /\u003e`errorStateMatcher: ErrorStateMatcher` | An object used to control when error messages are shown. |\r\n| `@Input()`\u003cbr /\u003e`format: string` | The date/time components to include, using predefined options or a custom format string.\u003cbr /\u003eSee [DatePipe Usage notes](https://angular.io/api/common/DatePipe#usage-notes) for more information. |\r\n| **Output**          |                                                                          |\r\n| `@Output()`\u003cbr /\u003e`dateChange: EventEmitter\u003cMatDatepickerInputEvent\u003cD\u003e\u003e` | Emits when a change event is fired on this `ngx-multiple-dates` element. |\r\n| `@Output()`\u003cbr /\u003e`remove: EventEmitter\u003cDateRemoveEvent\u003cD\u003e\u003e` | Emits on a date removal.                                                 |\r\n| **Properties**      |                                                                          |\r\n| `resetModel: Date`  | Model used to reset datepicker selected value, so unselect just selected date will be possible. |\r\n| `closeOnSelected: boolean` | Whether datepicker should be closed on date selected, or opened to select more dates. |\r\n| `empty: boolean`    | Whether the select has a value.                                          |\r\n| `shouldLabelFloat: boolean` | Whether the `MatFormField` label should try to float.                   |\r\n| `focused: boolean`  | Whether `ngx-multiple-dates` element has focus.                          |\r\n| `errorState: boolean` | Whether the control is in an error state.                              |\r\n| `stateChanges: Observable\u003cvoid\u003e` | Stream that emits whenever the state of the control changes such that the parent `MatFormField` needs to run change detection. |\r\n| `ngControl: NgControl` | Form control to manage component.                                     |\r\n| `controlType: 'ngx-multiple-dates'` | A name for this control that can be used by mat-form-field. |\r\n\r\n\r\n**Methods**\r\n\r\n* `focus` \u003cbr /\u003e Focuses the `ngx-multiple-dates` element.\r\n\r\n* `blur` \u003cbr /\u003e Used to leave focus from the `ngx-multiple-dates` element.\r\n\r\n* `setDescribedByIds` \u003cbr /\u003e Sets the list of element IDs that currently describe this control.\r\n\r\n| **Parameters**      |                                                                             |\r\n|---------------------|-----------------------------------------------------------------------------|\r\n| `ids: string[]`     | Ids to set.                                                                 |\r\n\r\n* `onContainerClick` \u003cbr /\u003e Handles a click on the control's container.\r\n\r\n* `validate` \u003cbr /\u003e Performs synchronous validation for the control.\r\n\r\n| **Parameters**             |                                                                      |\r\n|----------------------------|----------------------------------------------------------------------|\r\n| `control: AbstractControl` | The control to validate against.                                     |\r\n| **Returns**                                                                                       |\r\n| `ValidationErrors \\| null`  | A map of validation errors if validation fails, otherwise `null`.    |\r\n\r\n* `dateClass` \u003cbr /\u003e Function used to add CSS classes to selected dates.\r\n\r\n| **Parameters**              |                                                                     |\r\n|-----------------------------|---------------------------------------------------------------------|\r\n| `date: D`                   | Date to check if classes should be applied.                         |\r\n| **Returns**                 |                                                                     |\r\n| `MatCalendarCellCssClasses` | CSS classes to apply.                                               |\r\n\r\n* `dateChanged` \u003cbr /\u003e Fires when a change event is fired on the datepicker `\u003cinput /\u003e`.\r\n\r\n| **Parameters**                      |                                                             |\r\n|-------------------------------------|-------------------------------------------------------------|\r\n| `event: MatDatepickerInputEvent\u003cD\u003e` | Change event.                                               |\r\n\r\n* `remove` \u003cbr /\u003e Removes selected chip from the list.\r\n\r\n| **Parameters**              |                                                                     |\r\n|-----------------------------|---------------------------------------------------------------------|\r\n| `date: D`                   | Value to remove.                                                    |\r\n\r\n\r\n\r\n## Build\r\n\r\nRun `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.\r\n\r\n\r\n\r\n## Development server\r\n\r\nRun `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\r\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Dates"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekhmanrus%2Fngx-multiple-dates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flekhmanrus%2Fngx-multiple-dates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekhmanrus%2Fngx-multiple-dates/lists"}