{"id":50893880,"url":"https://github.com/koenz/angular-datepicker","last_synced_at":"2026-06-18T02:00:58.556Z","repository":{"id":31818458,"uuid":"125265555","full_name":"koenz/angular-datepicker","owner":"koenz","description":"An Angular 2+ datepicker component that animate, can have multiple calendars next to each other, has no dependencies","archived":false,"fork":false,"pushed_at":"2026-06-15T17:19:36.000Z","size":1045,"stargazers_count":12,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-06-15T19:18:30.853Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/koenz.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-03-14T19:47:41.000Z","updated_at":"2026-06-15T17:17:02.000Z","dependencies_parsed_at":"2022-09-08T18:00:11.483Z","dependency_job_id":null,"html_url":"https://github.com/koenz/angular-datepicker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/koenz/angular-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koenz%2Fangular-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koenz%2Fangular-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koenz%2Fangular-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koenz%2Fangular-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koenz","download_url":"https://codeload.github.com/koenz/angular-datepicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koenz%2Fangular-datepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34472826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-06-15T23:00:25.068Z","updated_at":"2026-06-18T02:00:58.549Z","avatar_url":"https://github.com/koenz.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# Animating Angular Datepicker\n\nAn animating datepicker for Angular 21+. For smooth date picking with range support, multiple calendars, and more. See the [demo page](http://zigterman.com/datepicker) for a preview.\n\nWant an improvement or found a bug? Please open a pull request or create an issue.\n\n## Requirements\n\n- **Angular 21+** (v2.0.0 is a breaking release; use v1.x if you are on Angular 6–20)\n- Node.js 20+ recommended\n\n## Installation\n\n```bash\nnpm install ngx-animating-datepicker\n```\n\nAdd `AaDatepickerModule` to your module imports:\n\n```ts\nimport { AaDatepickerModule } from 'ngx-animating-datepicker';\n\n@NgModule({\n  imports: [\n    AaDatepickerModule\n  ]\n})\nexport class AppModule {}\n```\n\n## Basic Usage\n\nImplement the datepicker component in one of the following ways\n\n### 1. Inline Animatepicker\nImplement aa-animatepicker component inline\n\n```html\n\u003caa-animatepicker\n\t[options]=\"datepickerOptions\"\n\t[(selectedDates)]=\"dates\"\u003e\u003c/aa-animatepicker\u003e\n```\n### 2. As Directive\nImplement datepicker as a directive\n```html\n\u003cinput  \n\ttype=\"text\"  \n\tvalue=\"dates | date\" \n\t[options]=\"datepickerOptions\" \n\t[(selectedDates)]=\"dates\" \n\taaDatepicker=\"directiveOptions\" /\u003e\n```\n### Options\nThe options can be used for the inline- as well as the directive implementation.  \n\nIn the following example you'll see the default options:\n\n```ts\ndatepickerOptions: Options = {\n\tselectMultiple: false, // Select multiple dates\n\tcloseOnSelect: false, // Close datepicker when date(s) selected\n\tanimationSpeed: 400, // Animation speed in ms\n\teasing: 'ease-in', // Easing type string\n\thideRestDays: false, // Hide the rest days\n\tdisableRestDays: true, // Disable the click on rest days\n\thideNavigation: false, // Hide the navigation\n\trange: false, // Use range functionality\n\tcurrentDate: new Date(), // Tne current displayed date (month, year)\n\ttimeoutBeforeClosing: 5000, // The timeout / delay before closing\n\tweekdayFormat: 'short', // \"narrow\", \"short\", \"long\"\n\tweekStart: 'monday' // Set the week start day\n};\n```\n\n#### Directive options\nThese options can be used only on the directive like so\n\n```html\n\u003cinput aaDatepicker=\"directiveOptions\" /\u003e\n```\nIn the following example you'll see the default options\n```ts\ndirectiveOptions: DirectiveOptions = {\n\tappendToBody: true, // Append Datepicker to body\n\topenDirection: 'bottom', // The direction it should open to\n\tcloseOnBlur: true  // Close the datepicker onBlur\n\tuseAnimatePicker: true // Use the regular datepicker or the animating one\n};\n```\n\n### @Input's()\nThe following inputs are available for the Animatepicker\n\n```ts\n @Input() minDate: Date; // Disables dates until this date\n @Input() maxDate: Date; // Disables dates from this date\n @Input() language: string; // Set the locale string. Example: nl-NL\n @Input() numberOfMonths: number; // Number of months shown next to eachother\n @Input() selectedDates: Date | Date\\[\\]; // Also a @Output (two-way data bindend)\n @Input() theme: string; // Theme string is added to the host\n @Input() isOpen: boolean; // The open state\n```\n\n#### Directive @input's()\nAll the above @Input's() can be used with the directive implementation as well. Additionally, you can use these @Input's() for the directive. The assigned values are the default ones:\n\n\n```ts\n@Input() appendToBody = true; // Append Datepicker to the body else append to directive\n@Input() openDirection = 'bottom'  // 'top', 'left', 'right', 'bottom'\n@Input() closeOnBlur = true; // Close datepicker on blur\n```\n\n### Outputs\n\nThe following output is available for Animatepicker:\n\n```ts\n@Output() navigate: EventEmitter\u003cYearMonth[]\u003e; // Emits year and month of each visible month when navigation changes\n```\n\n### Composing\nYou can add a footer or header to the datepicker by adding a `\u003cfooter\u003e` or `\u003cheader\u003e` element between the tags.\n\n```html\n\u003caa-animatepicker\n\t[options]=\"datepickerOptions\"\n\t[(selectedDates)]=\"dates\"\u003e\n\t\u003cheader (click)=\"someLogic()\"\u003eput your logic here\u003c/header\u003e\n\t\u003cfooter (click)=\"someLogic()\"\u003eput your logic here\u003c/footer\u003e\n\u003c/aa-animatepicker\u003e\n```\n\n### Regular Datepicker Component\nThe Animatepicker is an extension of the regular datepicker component. Don't want all that fancy animations? Then this is exactly what you need. Use `aa-datepicker` to implement in your component\n\n## \"Advanced\" Usage\n\n### Control the datepicker programmatically \nYou can also control the datepicker programmatically from within your component by using `ViewChild()`. Like so:\n\n```ts\n @ViewChild('demoDatepicker') demoDatepicker: AnimatepickerComponent;\n\n close(){\n  this.demoDatepicker.close();\n }\n\n open(){\n  this.demoDatepicker.open();\n }\n \n next(){\n  this.demoDatepicker.goToNextMonth();\n }\n\n previous(){\n  this.demoDatepicker.goToPreviousMonth();\n }\n```\n\nAnd in your template:\n\n```html\n\u003caa-animatepicker #demoDatepicker\u003e\u003c/aa-animatepicker\u003e\n```\n\n### Include your component in the datepicker\nImplement your custom component into the datepicker by using the `ng-content` located on the bottom of the datepicker\n\n```html\n\u003caa-animatepicker #demoDatepicker\u003e\n    \u003capp-custom-component\u003e\u003c/app-custom-component\u003e\n\u003c/aa-animatepicker\u003e\n```\n\n## Development\n\n```bash\nnpm install\nnpm start              # demo app\nnpm run lib:build      # build library\nnpm run lib:publish    # build + pack (dry run before publish)\nnpm test               # run unit tests (non-watch)\n```\n\n### Dependency safety\n\nThis repo uses a **7-day release cooldown** to reduce npm supply-chain risk (Shai-Hulud-style attacks):\n\n- `.npmrc` — `min-release-age=7` blocks installing package versions published within the last 7 days\n- `.github/dependabot.yml` — matching Dependabot cooldown (security updates are not delayed)\n\nRequires **npm 11.10+** (`packageManager` in `package.json`; enable with `corepack enable`).\n\n### Publishing to npm\n\n**Recommended setup:** [npm Trusted Publishers](https://docs.npmjs.com/trusted-publishers/) (OIDC via GitHub Actions). No long-lived `NPM_TOKEN` in secrets; publishes get provenance attestations automatically.\n\n#### One-time npm setup\n\n1. Sign in at [npmjs.com](https://www.npmjs.com/) as the package owner (`koenzz`).\n2. Open [ngx-animating-datepicker → Settings → Trusted Publisher](https://www.npmjs.com/package/ngx-animating-datepicker/access).\n3. Add a **GitHub Actions** trusted publisher:\n   - **Organization or user:** `koenz`\n   - **Repository:** `angular-datepicker`\n   - **Workflow filename:** `publish.yml`\n   - **Environment:** leave empty (unless you add a GitHub Environment later)\n\n#### Release a version\n\n1. Bump `version` in `projects/ngx-animating-datepicker/package.json`.\n2. Commit and merge to `main`, then tag:\n\n```bash\ngit tag v2.0.0\ngit push origin v2.0.0\n```\n\n3. The [Publish to npm](.github/workflows/publish.yml) workflow runs tests, builds the library, and publishes from `dist/ngx-animating-datepicker`.\n\nThe git tag must match the library version exactly (`v2.0.0` → `\"version\": \"2.0.0\"`).\n\n#### Manual publish (fallback)\n\n```bash\nnpm run lib:build\nnpm run copy:readme\ncd dist/ngx-animating-datepicker\nnpm publish --access public\n```\n\nUse a granular npm access token with **Publish** scope only, or `npm login` with 2FA. Prefer Trusted Publishers for CI.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoenz%2Fangular-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoenz%2Fangular-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoenz%2Fangular-datepicker/lists"}