angular-datepicker

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #go #macos #nodejs #awesome #cli #vue #pytorch #security #mcp #ios

angular-datepicker

(★ 12)

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

angular-datepicker 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<aa-animatepicker
	[options]="datepickerOptions"
	[(selectedDates)]="dates"></aa-animatepicker>
```
### 2. As Directive
Implement datepicker as a directive
```html
<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:

```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
<input aaDatepicker="directiveOptions" />
```
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<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.

```html
<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:

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

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

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

angular-datepicker

angular-datepicker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

angular-datepicker

angular-datepicker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README