Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/koenz/angular-datepicker

An Angular 2+ datepicker component that animate, can have multiple calendars next to each other, has no dependencies
https://github.com/koenz/angular-datepicker

Last synced: about 9 hours ago
JSON representation

An Angular 2+ datepicker component that animate, can have multiple calendars next to each other, has no dependencies

Awesome Lists containing this project

README 

          
# Animating Angular Datepicker



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



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



```bash

npm install ngx-animating-datepicker

```



Add `AaDatepickerModule` to your module imports:



```ts

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



```html



```

### 2. As Directive

Implement datepicker as a directive

```html



```

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



```ts

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



```html



```

In the following example you'll see the default options

```ts

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



```ts

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



```ts

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



```ts

@Output() navigate: EventEmitter; // 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 `` or `` element between the tags.



```html



	put your logic here

	put your logic here



```



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



```ts

 @ViewChild('demoDatepicker') demoDatepicker: AnimatepickerComponent;



 close(){

  this.demoDatepicker.close();

 }



 open(){

  this.demoDatepicker.open();

 }

 

 next(){

  this.demoDatepicker.goToNextMonth();

 }



 previous(){

  this.demoDatepicker.goToPreviousMonth();

 }

```



And in your template:



```html



```



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



```html



    



```



## Development



```bash

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](https://docs.npmjs.com/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](https://www.npmjs.com/) as the package owner (`koenzz`).

2. Open [ngx-animating-datepicker → Settings → Trusted Publisher](https://www.npmjs.com/package/ngx-animating-datepicker/access).

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:



```bash

git tag v2.0.0

git push origin v2.0.0

```



3. The [Publish to npm](.github/workflows/publish.yml) 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)



```bash

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.