Qeydar DatePicker: A Powerful, Extensible Date & Time Picker for Angular

Abbas — Thu, 10 Sep 2026 06:30:42 +0000

A modern Angular DatePicker built for real-world applications — from Jalali and Gregorian calendars to completely custom calendar systems.

Building a date picker sounds simple.

Until your application needs to support multiple calendars, RTL layouts, date ranges, time selection, custom validation, disabled dates, mobile behavior, custom UI, and a design system that doesn't look anything like the default calendar.

That is where things get complicated.

I originally started building Qeydar Datepicker around two years ago to solve these kinds of real-world requirements. Since then, it has grown from a simple Angular date picker into a much more complete and extensible date and time picking solution.

A few days ago, I released Qeydar Datepicker v3, with support for Angular 21+, bringing the project up to date with the latest Angular ecosystem.

But the Angular upgrade is only part of the story.

The real goal behind Qeydar is to build a date picker that doesn't force you to adapt your application to the component.

Instead, the component adapts to your application.

What is Qeydar Datepicker?

Qeydar Datepicker is an Angular date and time picker designed with flexibility and extensibility in mind.

It provides two main components:

QeydarDatePicker
QeydarTimePicker

Out of the box, the DatePicker supports Gregorian and Jalali (Persian) calendars, single-date selection, range selection, date + time selection, RTL, localization, validation, disabled dates, keyboard navigation, responsive behavior, and more.

But one of the most important design decisions in Qeydar is that the calendar system isn't tightly coupled to the UI.

This is where Date Adapters come in.

One DatePicker, Multiple Calendar Systems

Different applications use different calendar systems.

For example:

Gregorian
Jalali / Persian
Hijri
Chinese
Indian calendars
Other regional or domain-specific calendars

Trying to implement every possible calendar directly inside a DatePicker quickly becomes difficult to maintain.

Instead, Qeydar uses an adapter-based architecture.

The DatePicker works with a DateAdapter, which is responsible for calendar-specific operations such as parsing, formatting, creating dates, navigating months and years, determining the number of days in a month, and comparing dates.

The built-in implementation already provides Gregorian and Jalali support.

But the architecture doesn't stop there.

You can implement your own adapter and plug it into the same DatePicker without rewriting the picker itself. The project documentation even includes a complete example of a custom Hijri adapter.

Conceptually, it looks like this:

            Qeydar DatePicker
                   │
                   ▼
              DateAdapter
             /     |      \
            /      |       \
    Gregorian    Jalali    Custom
                          /     \
                       Hijri   Chinese
                               Indian
                               ...

This means the UI, range selection, validation, disabled dates, navigation and other picker features can remain the same while the underlying calendar system changes.

That is a fundamentally different approach from building a separate DatePicker for every calendar.

Want to support another calendar?

Implement the adapter.

That's it.

The rest of the DatePicker doesn't need to know how that calendar works internally.

The UI Doesn't Have to Look Like a DatePicker

This is probably one of my favorite parts of Qeydar.

Most date picker libraries let you change colors, spacing and a few CSS variables.

But eventually you hit a wall.

What happens when your design requires a completely different calendar UI?

What if you want:

event indicators on dates
special holiday styling
custom day badges
a completely different header
custom navigation
custom footer actions
quick range buttons
a wheel-style date picker
a completely custom calendar body

Qeydar was designed to handle that.

Custom Templates

The qeydarTemplate directive allows you to replace individual parts of the DatePicker while keeping its underlying functionality.

You can customize:

day
month
year
toolbar
header
footer
body

The most important part is that you don't lose the DatePicker's behavior when doing this.

You can replace the visual representation while keeping things such as:

date selection
range selection
validation
disabled dates
form integration
the DatePicker state
navigation logic

The project documentation exposes typed template contexts containing useful state such as isSelected, isInRange, isRangeStart, isRangeEnd, isToday, isDisabled, and more.

For example:

<qeydar-date-picker
[(ngModel)]="selectedDate"
[calendarType]="'jalali'"

<ng-template
qeydarTemplate="day"
let-day
let-isSelected="isSelected"
let-isToday="isToday"
<div
  class="my-day"
  [class.selected]="isSelected"
  [class.today]="isToday"
>
  {{ day.getDate() }}
</div>

You are not limited to changing a day cell either.

You can take control over an entire region:

<button
type="button"
(click)="ctx.prev()"
[disabled]="ctx.prevDisabled"

Previous

{{ ctx.currentMonthName }} {{ ctx.currentYear }}

<button
type="button"
(click)="ctx.next()"
[disabled]="ctx.nextDisabled"

Next

And there is an even more powerful option:

Fully custom calendar bodies

The body template acts as an escape hatch.

You can completely replace the built-in day/month/year grids and render your own UI while still using Qeydar's state and actions.

That opens the door to completely different experiences, such as wheel pickers, custom scheduling interfaces, booking calendars, event calendars, or highly specialized enterprise designs.

In other words:

Qeydar doesn't force you to use a specific calendar design.

Single Date, Range, or Date + Time

Real applications rarely need only a basic date input.

Qeydar supports:

Single-date selection
<qeydar-date-picker
[(ngModel)]="selectedDate"
[calendarType]="'jalali'"

Date ranges
[(ngModel)]="dateRange"
[isRange]="true"
[calendarType]="'jalali'"

The range API is flexible enough to work with Date objects, strings, or mixed values.

Date + Time

You can also combine date and time selection:

<qeydar-date-picker
[(ngModel)]="selectedDateTime"
[format]="'yyyy/MM/dd HH:mm:ss'"
[showTimePicker]="true"
[timeDisplayFormat]="'HH:mm'"

And when you only need time selection, there is a dedicated:

The TimePicker supports both 12/24-hour formats, optional seconds, time restrictions, input masking, inline mode, disabled-time filtering and modal presentation.

Built for Real Applications

A date picker becomes useful when it solves the problems that appear around dates.

Qeydar includes functionality such as:

Gregorian and Jalali calendars
single-date selection
range selection
date + time selection
12/24-hour time selection
min/max date restrictions
disabled dates
custom disabled-date filters
disabled time filters
RTL support
English/Persian localization
keyboard navigation
Angular form integration
customizable formatting
multiple popup placements
inline mode
read-only modes
responsive behavior
custom templates
modal presentation

These features are all part of the current package rather than requiring a collection of separate plugins.

Popover or Modal?

Another feature that became important as Qeydar evolved was presentation mode.

Sometimes a date picker should behave like a traditional dropdown.

Sometimes, especially on mobile or in complex workflows, a modal experience makes much more sense.

Qeydar supports both:

<qeydar-date-picker
[(ngModel)]="value"
[presentation]="'modal'"

The modal implementation uses Angular CDK Overlay and supports features such as:

backdrop
focus trapping
Escape-to-close
backdrop-to-close
focus restoration
animations
mobile bottom-sheet behavior

And importantly, the modal mode doesn't create a completely different DatePicker implementation.

It uses the same picker functionality, meaning features such as range selection, custom templates, validation and disabled dates continue to work.

Customization Without Fighting the Library

One of the main principles behind Qeydar is:

Customization should be a first-class feature, not a hack.

There is a big difference between:

"Here are 10 CSS variables. Good luck."

and:

"Here is the component state. Build the UI you need."

Qeydar tries to follow the second philosophy.

The combination of:

DateAdapter + Templates + Context + Picker State

makes it possible to build experiences that would normally require forking a date picker library.

A Small API, A Lot of Possibilities

A basic integration can be extremely simple:

npm install @qeydar/datepicker

Then:

import { QeydarDatePickerModule } from '@qeydar/datepicker';

@NgModule({
imports: [
QeydarDatePickerModule
]
})
export class AppModule {}

And:

<qeydar-date-picker
[(ngModel)]="selectedDate"
[calendarType]="'jalali'"

The current 3.x line targets Angular 21+. The package also maintains version lines for older Angular versions, with the repository documenting the compatibility history.

[Screenshots / Demo Section]

📸 Screenshot 1 — Gregorian DatePicker

Show the basic Gregorian picker and its clean default UI here.

📸 Screenshot 2 — Jalali / Persian DatePicker

Show the Jalali calendar, preferably together with RTL mode.

📸 Screenshot 3 — Range Picker

Show start/end selection and an active date range.

📸 Screenshot 4 — Date + Time Picker

Why I Built It This Way

There are already many DatePicker libraries for Angular.

So the goal was never to create "yet another date picker."

The goal was to solve a different problem:

What happens when your application's requirements don't fit the assumptions made by a DatePicker library?

Maybe the application uses a non-Gregorian calendar.

Maybe the designer wants a completely custom calendar.

Maybe the product needs both desktop popovers and mobile sheets.

Maybe dates have events, holidays, statuses or domain-specific metadata.

Maybe the application needs a range picker with custom workflows.

Instead of adding dozens of flags to support every possible use case, Qeydar tries to provide the building blocks needed to create those experiences.

From a Two-Year-Old Project to Angular 21+

Qeydar started roughly two years ago.

Since then, it has evolved considerably.

The latest major milestone is version 3.0.0, released with support for Angular 21+.

For me, updating the package wasn't just about changing the Angular version.

It was an opportunity to revisit the architecture, improve extensibility, document advanced features, and make the project much more useful for applications that need more than a basic date input.

And this is only the beginning.

Who Is Qeydar For?

Qeydar can be useful for projects that need more than a simple calendar popup.

Especially:

Enterprise Angular applications

where complex date workflows, forms, ranges and custom business rules are common.

Persian / Middle Eastern applications

where Jalali calendars, RTL and localized date handling are important.

International applications

that need flexibility around calendar systems.

Design-heavy applications

where the default look and behavior of a DatePicker isn't enough.

Applications with domain-specific calendars

where a custom DateAdapter can provide the required calendar logic without rewriting the entire picker.

The Bigger Idea

A DatePicker shouldn't own your application's calendar logic.

It should provide an interface for interacting with dates.

That's why Qeydar separates the problem into different layers:

             Your Application
                   │
                   ▼
              Qeydar UI
                   │
        ┌──────────┴──────────┐
        ▼                     ▼
    Templates              State
        │                     │
        └──────────┬──────────┘
                   ▼
              DateAdapter
                   │
      ┌────────────┼────────────┐
      ▼            ▼            ▼
  Gregorian      Jalali       Custom
                              Calendar

This architecture makes the component much more adaptable than a calendar that assumes one specific date system or one specific UI.

Try Qeydar

The project is open source and available on GitHub and npm.

GitHub

https://github.com/Abbasr7/qeydar-datepicker

npm

https://www.npmjs.com/package/@qeydar/datepicker

Live Demo

https://qeydar-datepicker-git-master-abbasr7s-projects.vercel.app/

Install it with:

npm install @qeydar/datepicker
Final Thoughts

I built Qeydar because dates are rarely as simple as they look.

A production application may need a different calendar, a different UI, a different interaction model, or all of them at the same time.

So instead of trying to build one perfect DatePicker UI for everyone, I wanted to build a DatePicker that can become whatever the application needs it to be.

From a straightforward Gregorian date field to a Jalali range picker, from a date + time selector to a completely custom calendar interface — the same core component can handle all of them.

And with the adapter architecture, supporting another calendar doesn't necessarily mean rebuilding the DatePicker.

Build the adapter.
Customize the UI.
Keep the core functionality.

That's the idea behind Qeydar.

DEV Community: Abbas

Qeydar DatePicker: A Powerful, Extensible Date & Time Picker for Angular