FlexibleDatePicker

Everything you need for date & time input in Angular

A composable picker library with headless engines, roller time wheels, range presets, and first-class forms support — styled with CSS variables and ready for production.

View examples Read documentation GitHub npm

Eight picker components

Date, date range, time, time range, month, month range, year, and year range — each as a standalone Angular component with consistent UX.

Roller time wheels

Native-feeling scroll wheels for hours, minutes, and seconds with infinite loop scrolling and compact 3-row layout.

Range selection

Dual calendars, preset shortcuts, hover preview, and side-by-side start/end time pickers for complete range workflows.

Headless engines

Pure TypeScript selection engines power every picker. Use them for custom UI or testable selection logic without the DOM.

Theming & custom colors

Light, dark, and auto color schemes per picker or globally. Override any design token with FlexThemeTokens for full brand control.

Forms-ready

Every picker implements ControlValueAccessor for reactive forms and template-driven ngModel out of the box.

Accessible by default

Dialog roles, focus traps, keyboard navigation, ARIA labels on triggers and scroll columns, and escape to dismiss.

Locale & RTL

Localized weekday labels and calendar layout via FlexLocaleService. Full RTL support for Arabic and other right-to-left locales.

Date picker

fdp-date-picker

Single-day calendar with optional inline time drum, min/max, and disabled dates.

Date range picker

fdp-date-range-picker

Preset sidebar, responsive dual calendars, and optional start/end times.

Time picker

fdp-time-picker

Standalone roller wheel for time with 12h/24h, seconds, and step intervals.

Time range picker

fdp-time-range-picker

Parallel start and end time columns with OK/Cancel confirmation.

Month picker

fdp-month-picker

12-month grid for selecting a single month and year.

Month range picker

fdp-month-range-picker

Select a contiguous range of months across years.

Year picker

fdp-year-picker

Scrollable year grid with decade navigation.

Year range picker

fdp-year-range-picker

Pick a span of years for long-term filters and reporting.

Built for developers

FlexibleDatePicker separates selection logic from presentation. Components wrap headless engines that manage state, validation, and calendar generation — so you get predictable behavior and a clear path to customization.

Built on Angular 20+ signals and OnPush change detection
date-fns for formatting, parsing, and calendar math
Popover overlay with smart above/below placement
Mobile-friendly bottom sheet on small viewports
Configurable placeholders, formats, and calendar icons
Weekend blocking and custom isDateDisabled callbacks
Typed configuration models for time, presets, and calendar layout

< >Implementation Code
app.component.ts
import {
  FlexDatePickerComponent,
  FlexDateRangePickerComponent,
  FlexTimePickerComponent,
  FlexThemeService,
  FlexLocaleService,
} from '@manidev/ngx-flexible-date-picker';

Ready to try it?

Explore live demos with configurable options, or jump into the docs for installation and API details.

Open playground Get started