Angular Datepicker2

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