ngx-dual-rangepicker

Dual-calendar date range picker for Angular 20+ and Angular Material M3.

Live demo →

More screenshots

Basic	Dark mode
Custom theme	Vertical layout
Month mode	Year mode
Time picker	Without presets

• Two calendar panels side-by-side (or stacked) with independent navigation
• Day / Month / Year selection modes — switchable or locked
• Built-in presets (Today, This week, Last month, This quarter, …)
• Optional time picker for start and end time
• Smart overlay positioning — auto-fits to the viewport or use a forced position
• Opt-in mobile overlay — fullscreen, side panel, or bottom sheet on small screens
• Internal animation control — slide-in mobile panels, with an option to disable library animations
• Hover preview highlights the candidate range as the user moves the cursor
• Fully accessible — focus trap, role="grid", aria-selected, keyboard navigation
• Angular Material M3 — styled with M3 tokens, dark mode included
• Responsive — horizontal layout on wide viewports, vertical on narrow screens
• Standalone components, no NgModule required

npm install ngx-dual-rangepicker

The library requires Angular Material and the CDK as peer dependencies:

npm install @angular/material @angular/cdk

In your app.config.ts:

import { provideNativeDateAdapter } from '@angular/material/core';

export const appConfig: ApplicationConfig = {
  providers: [
    // …
    provideNativeDateAdapter(),
  ],
};

import { FormsModule } from '@angular/forms';
import { NgxDualRangepickerComponent, DateRangeResult } from 'ngx-dual-rangepicker';

@Component({
  standalone: true,
  imports: [NgxDualRangepickerComponent, FormsModule],
  template: `
    <ngx-dual-rangepicker
      [(ngModel)]="range"
      (rangeChanged)="onRange($event)"
    />
  `,
})
export class MyComponent {
  range: DateRangeResult | null = null;

  onRange(result: DateRangeResult) {
    console.log(result.start, result.end);
  }
}

enableMobile does not force mobile mode permanently. It allows the component to switch when the viewport is narrow:

mobile mode = enableMobile && viewport width <= 767px

disableAnimations only disables animations and transitions owned by this library. Angular Material animations still follow the application's Angular Material configuration.

minCalendarDays and maxCalendarDays constrain the number of inclusive calendar days in the selected range:

Jan 1 -> Jan 1 = 1 calendar day
Jan 1 -> Jan 2 = 2 calendar days

These constraints are ignored when enableTimePicker is true. Use duration-based constraints for time-aware ranges if they are added later.

Invalid values (0, negative, decimals, NaN, Infinity) are ignored. If minCalendarDays is greater than maxCalendarDays, both constraints are ignored and a development warning is logged.

interface DateRangeResult {
  start: Date;
  end: Date;
  startTime?: { hours: number; minutes: number }; // only when enableTimePicker = true
  endTime?:   { hours: number; minutes: number }; // only when enableTimePicker = true
  preset?: string;                                // label of the active preset, if any
}

import { DateRangePreset } from 'ngx-dual-rangepicker';
import { DateRange } from '@angular/material/datepicker';

const myPresets: DateRangePreset[] = [
  {
    label: 'Last 7 days',
    range: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(end.getDate() - 6);
      return new DateRange(start, end);
    },
  },
];

<ngx-dual-rangepicker [presets]="myPresets" />

Presets outside the current min / max constraints remain visible but disabled, so users can understand why the shortcut is unavailable.

Override any label by providing DUAL_CALENDAR_INTL:

import { DUAL_CALENDAR_INTL, DualCalendarIntl } from 'ngx-dual-rangepicker';

const myIntl: DualCalendarIntl = {
  applyLabel: 'Valider',
  cancelLabel: 'Annuler',
  daysLabel: 'Jours',
  monthsLabel: 'Mois',
  yearsLabel: 'Années',
  timeLabel: 'Heure',
  startTimeLabel: 'Début',
  endTimeLabel: 'Fin',
};

// in providers:
{ provide: DUAL_CALENDAR_INTL, useValue: myIntl }

The component is styled with Angular Material M3 system tokens. You can also override the following custom properties:

MIT © Olivier Petitjean