Angular Datepicker2

October 8, 2025 · View on GitHub

Modern Angular datepicker component with standalone support. Compatible with Angular 16+. Date range picker, multiple dates, customizable templates. Lightweight, no extra dependencies.

Features

✅ Standalone Components – Angular 16+ standalone ready
✅ Selection Modes – Single, multiple dates, or date ranges
✅ Customizable – Template support for custom day rendering
✅ Modern Angular – Signals-friendly, OnPush, ES2022 builds
✅ TypeScript – Strict typings for all APIs
✅ No Extra Deps – Only peer deps: @angular/core and @angular/common

Installation

npm install @nsnayp/angular-datepicker2

Demo

https://nsnayp13.github.io/angular-datepicker2/

Quick Start

Standalone Component (Angular 16+)

import { Component } from '@angular/core';
import { AngularDatepicker2 } from '@nsnayp/angular-datepicker2';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [AngularDatepicker2],
  template: `
    <angular-datepicker2 
      [(selectedDates)]="selectedDates"
      [selectMode]="'single'"
      (onDayClick)="onDayClick($event)">
    </angular-datepicker2>
  `
})
export class ExampleComponent {
  selectedDates: Date[] = [];
  
  onDayClick(day: any) {
    console.log('Day clicked:', day);
  }
}

Module-based (Angular 16+)

import { NgModule } from '@angular/core';
import { AngularDatepicker2 } from '@nsnayp/angular-datepicker2';

@NgModule({
  imports: [AngularDatepicker2],
})
export class YourModule { }

API Reference

Inputs

Property	Type	Default	Description
`selectedDates`	`Date[]`	`[]`	Array of selected dates
`selectMode`	`'single' \| 'multiple' \| 'period'`	`'single'`	Selection mode
`shownDate`	`Date`	`new Date()`	Date to display initially
`viewMode`	`ViewMode \| number`	`1`	Number of months to show
`weekStart`	`number`	`0`	First day of week (0 = Sunday)
`weekends`	`number[]`	`[0, 6]`	Weekend days
`disabledDates`	`DisabledDates`	-	Disabled dates configuration
`suggest`	`Suggest[]`	-	Predefined date suggestions
`days`	`Day[]`	-	Custom day definitions
`vertical`	`boolean`	`false`	Vertical alignment of days

Outputs

Event	Type	Description
`selectedDatesChange`	`Date[]`	Emitted when selection changes
`onDayClick`	`Day`	Emitted when a day is clicked

Examples

Date Range Selection

@Component({
  template: `
    <angular-datepicker2 
      [(selectedDates)]="dateRange"
      [selectMode]="'period'">
    </angular-datepicker2>
  `
})
export class DateRangeExample {
  dateRange: Date[] = [];
}

Custom Day Templates

import { DayDirective } from '@nsnayp/angular-datepicker2';

@Component({
  standalone: true,
  imports: [AngularDatepicker2, DayDirective],
  template: `
    <angular-datepicker2 [(selectedDates)]="selectedDates">
      <div *ad2day="let date from customDate" [attr.title]="'Custom day'">
        {{date.getDate()}}
        <div class="points">
          <div class="point blue"></div>
          <div class="point green"></div>
        </div>
      </div>
    </angular-datepicker2>
  `
})
export class CustomTemplateExample {
  selectedDates: Date[] = [];
  customDate = new Date(2024, 3, 15);
}

With Suggestions

import { SelectMode } from '@nsnayp/angular-datepicker2';

@Component({
  template: `
    <angular-datepicker2 
      [(selectedDates)]="selectedDates"
      [suggest]="suggestions">
    </angular-datepicker2>
  `
})
export class SuggestionsExample {
  selectedDates: Date[] = [];
  
  suggestions = [
    {
      title: 'Last two weeks',
      selectMode: SelectMode.Period,
      selectedDates: [
        new Date(2024, 3, 1), 
        new Date(2024, 3, 14)
      ],
    },
    {
      title: 'Specific dates',
      selectMode: SelectMode.Multiple,
      selectedDates: [
        new Date(2024, 3, 1),
        new Date(2024, 3, 15),
        new Date(2024, 3, 30),
      ],
    }
  ];
}

Interfaces

SelectMode

enum SelectMode {
  Single = 'single',
  Multiple = 'multiple', 
  Period = 'period'
}

ViewMode

enum ViewMode {
  Quarter = 'quarter',
  Semester = 'semester'
}

DisabledDates

interface DisabledDates {
  dates?: Date[];
  after?: Date;
  before?: Date;
}

Utilities

The library exports DateUtils class with helpful date manipulation methods:

import { DateUtils } from '@nsnayp/angular-datepicker2';

// Add/subtract days
const tomorrow = DateUtils.adjustDate(new Date(), 1);

// Add/subtract months
const nextMonth = DateUtils.adjustMonth(new Date(), 1);

// Get formatted date string
const dateString = DateUtils.getYmd(new Date());

i18n

Set registerLocaleData(locale, 'locale') in your app. See Angular i18n guide

Supported versions

Angular: 16–19 (peer deps @angular/common and @angular/core >= 16)
TypeScript: 5.x
Targets: ES2022 modules, modern browsers

Built and tested with Angular 19.2. Backwards compatible to Angular 16 via peer ranges.

Migration from v3.x

The library now uses standalone components by default:

// Before (v3.x)
import { AngularDatepicker2Module } from '@nsnayp/angular-datepicker2';

// After (v4.x)
import { AngularDatepicker2 } from '@nsnayp/angular-datepicker2';

SEO

Description: Modern Angular datepicker/calendar with date range, multiple selection, and customizable templates. Standalone-ready for Angular 16+.

Keywords: angular datepicker, angular calendar, angular 16 datepicker, angular 17, angular 18, angular 19, date range picker, standalone components, multiple dates, period picker, ui component

License

MIT