Animating Angular Datepicker

An animating datepicker for Angular 21+. For smooth date picking with range support, multiple calendars, and more. See the demo page for a preview.

Want an improvement or found a bug? Please open a pull request or create an issue.

Requirements

• Angular 21+ (v2.0.0 is a breaking release; use v1.x if you are on Angular 6–20)
• Node.js 20+ recommended

Installation

npm install ngx-animating-datepicker

Add AaDatepickerModule to your module imports:

import { AaDatepickerModule } from 'ngx-animating-datepicker';

@NgModule({
  imports: [
    AaDatepickerModule
  ]
})
export class AppModule {}

Basic Usage

Implement the datepicker component in one of the following ways

1. Inline Animatepicker

Implement aa-animatepicker component inline

<aa-animatepicker
	[options]="datepickerOptions"
	[(selectedDates)]="dates"></aa-animatepicker>

2. As Directive

Implement datepicker as a directive

<input  
	type="text"  
	value="dates | date" 
	[options]="datepickerOptions" 
	[(selectedDates)]="dates" 
	aaDatepicker="directiveOptions" />

Options

The options can be used for the inline- as well as the directive implementation.

In the following example you'll see the default options:

datepickerOptions: Options = {
	selectMultiple: false, // Select multiple dates
	closeOnSelect: false, // Close datepicker when date(s) selected
	animationSpeed: 400, // Animation speed in ms
	easing: 'ease-in', // Easing type string
	hideRestDays: false, // Hide the rest days
	disableRestDays: true, // Disable the click on rest days
	hideNavigation: false, // Hide the navigation
	range: false, // Use range functionality
	currentDate: new Date(), // Tne current displayed date (month, year)
	timeoutBeforeClosing: 5000, // The timeout / delay before closing
	weekdayFormat: 'short', // "narrow", "short", "long"
	weekStart: 'monday' // Set the week start day
};

Directive options

These options can be used only on the directive like so

<input aaDatepicker="directiveOptions" />

In the following example you'll see the default options

directiveOptions: DirectiveOptions = {
	appendToBody: true, // Append Datepicker to body
	openDirection: 'bottom', // The direction it should open to
	closeOnBlur: true  // Close the datepicker onBlur
	useAnimatePicker: true // Use the regular datepicker or the animating one
};

@Input's()

The following inputs are available for the Animatepicker

 @Input() minDate: Date; // Disables dates until this date
 @Input() maxDate: Date; // Disables dates from this date
 @Input() language: string; // Set the locale string. Example: nl-NL
 @Input() numberOfMonths: number; // Number of months shown next to eachother
 @Input() selectedDates: Date | Date\[\]; // Also a @Output (two-way data bindend)
 @Input() theme: string; // Theme string is added to the host
 @Input() isOpen: boolean; // The open state

Directive @input's()

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

@Input() appendToBody = true; // Append Datepicker to the body else append to directive
@Input() openDirection = 'bottom'  // 'top', 'left', 'right', 'bottom'
@Input() closeOnBlur = true; // Close datepicker on blur

Outputs

The following output is available for Animatepicker:

@Output() navigate: EventEmitter<YearMonth[]>; // Emits year and month of each visible month when navigation changes

Composing

You can add a footer or header to the datepicker by adding a <footer> or <header> element between the tags.

<aa-animatepicker
	[options]="datepickerOptions"
	[(selectedDates)]="dates">
	<header (click)="someLogic()">put your logic here</header>
	<footer (click)="someLogic()">put your logic here</footer>
</aa-animatepicker>

Regular Datepicker Component

The 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

"Advanced" Usage

Control the datepicker programmatically

You can also control the datepicker programmatically from within your component by using ViewChild(). Like so:

 @ViewChild('demoDatepicker') demoDatepicker: AnimatepickerComponent;

 close(){
  this.demoDatepicker.close();
 }

 open(){
  this.demoDatepicker.open();
 }
 
 next(){
  this.demoDatepicker.goToNextMonth();
 }

 previous(){
  this.demoDatepicker.goToPreviousMonth();
 }

And in your template:

<aa-animatepicker #demoDatepicker></aa-animatepicker>

Include your component in the datepicker

Implement your custom component into the datepicker by using the ng-content located on the bottom of the datepicker

<aa-animatepicker #demoDatepicker>
    <app-custom-component></app-custom-component>
</aa-animatepicker>

Development

npm install
npm start              # demo app
npm run lib:build      # build library
npm run lib:publish    # build + pack (dry run before publish)
npm test               # run unit tests (non-watch)

Dependency safety

This repo uses a 7-day release cooldown to reduce npm supply-chain risk (Shai-Hulud-style attacks):

• .npmrc — min-release-age=7 blocks installing package versions published within the last 7 days
• .github/dependabot.yml — matching Dependabot cooldown (security updates are not delayed)

Requires npm 11.10+ (packageManager in package.json; enable with corepack enable).

Publishing to npm

Recommended setup: npm Trusted Publishers (OIDC via GitHub Actions). No long-lived NPM_TOKEN in secrets; publishes get provenance attestations automatically.

One-time npm setup

1. Sign in at npmjs.com as the package owner (koenzz).
2. Open ngx-animating-datepicker → Settings → Trusted Publisher.
3. Add a GitHub Actions trusted publisher:
   • Organization or user: koenz
   • Repository: angular-datepicker
   • Workflow filename: publish.yml
   • Environment: leave empty (unless you add a GitHub Environment later)

Release a version

1. Bump version in projects/ngx-animating-datepicker/package.json.
2. Commit and merge to main, then tag:

git tag v2.0.0
git push origin v2.0.0

3. The Publish to npm workflow runs tests, builds the library, and publishes from dist/ngx-animating-datepicker.

The git tag must match the library version exactly (v2.0.0 → "version": "2.0.0").

Manual publish (fallback)

npm run lib:build
npm run copy:readme
cd dist/ngx-animating-datepicker
npm publish --access public

Use a granular npm access token with Publish scope only, or npm login with 2FA. Prefer Trusted Publishers for CI.