A modern, lightweight, and incredibly fast date picker for Angular 19+.
Built from the ground up using Angular Signals and fully compatible with Zoneless applications.

Features

• Zoneless Ready: No zone.js required. 100% Signal-based change detection.
• Multi-Range Selection: Select single days, date ranges, or multiple discrete ranges out of the box.
• Highly Customizable: Easy to theme via CSS variables.
• Lightweight: No heavy dependencies (no Moment.js, no date-fns).
• Strict Typings: Powered by a robust Discriminated Union data model for predictable state management.

Installation

npm install @tavara/ngx-useful-date-picker

Usage

Import the standalone component into your application:

import { Component } from '@angular/core';
import { UsefulDatePickerComponent, Selection } from '@tavara/ngx-useful-date-picker';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [UsefulDatePickerComponent],
  template: `
    <ngx-useful-date-picker
      [selections]="myDates"
      (selectionsChange)="onDatesChanged($event)"
      [calendarMode]="'range'"
      [weekStartsMonday]="true"
      [disableFilter]="myDisableFilter"
      accent="#d63384"
    >
    </ngx-useful-date-picker>
  `,
})
export class AppDemo {
  myDates: Selection[] = [];

  onDatesChanged(newSelections: Selection[]) {
    this.myDates = newSelections;
  }

  // Example: Disable all weekends
  myDisableFilter = (date: DatePoint): boolean => {
    const d = new Date(date.y, date.m, date.d).getDay();
    return d === 0 || d === 6;
  };
}

Theming

You can easily override the default colors by targeting the CSS variables on the component or in your global stylesheet:

:root {
  --udp-primary: #2563eb; /* Accent color for selected days */
  --udp-conn-active: #bfdbfe; /* Background for the range connection */
  --udp-conn-preview: #e5e7eb; /* Background for the hover preview */
  --udp-text-inverse: #ffffff; /* Text color inside the primary circles */
}

Internationalization (i18n)

The date picker is in English by default. To change the language, provide your own implementation of the UsefulDatePickerIntl service in your app config.

The library includes a Spanish translation out of the box (UsefulDatePickerIntlEs):

import { ApplicationConfig } from '@angular/core';
import { UsefulDatePickerIntl, UsefulDatePickerIntlEs } from '@tavara/ngx-useful-date-picker';

export const appConfig: ApplicationConfig = {
  providers: [{ provide: UsefulDatePickerIntl, useClass: UsefulDatePickerIntlEs }],
};

To support other languages, simply extend the base class:

import { Injectable } from '@angular/core';
import { UsefulDatePickerIntl } from '@tavara/ngx-useful-date-picker';

@Injectable({ providedIn: 'root' })
export class UsefulDatePickerIntlFr extends UsefulDatePickerIntl {
  override monthsShort = ['Janv.', 'Févr.', 'Mars' /* ... */];
  // Override other properties as needed
}

Gallery & Advanced Features

Here are some of the different modes and states supported by the date picker:

Default / Empty State

Single Day Selection

Day Mode (Instead of Range)

Custom Accent Color

Cross-Month Selection

Week Starts on Sunday

Spanish Language Override (i18n)

Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check out the repository at https://gitlab.com/tavara/useful-date-picker.

License

MIT License © Javier Távara