GitHub - nsnayp13/angular-datepicker2: Angular datepicker, best calendar. Select Period, single, or multiple dates. Template your own day in calendar. Two way databinding and others

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