Fetrarij

Posted on Oct 13

ngx-daterangepicker-material is back: Angular 22, SSR, zoneless and Signal Forms

#angular #typescript #webdev #opensource

ngx-daterangepicker-material is a date range picker for Angular. It has predefined ranges (Today,Last 7 days, This month...), an optional time picker, and a Material look.

It is downloaded about 250,000 times a month on npm. But after version 6.0.4 in October 2022, there was no new release until 2026. No support for new Angular versions, and close to 200 open issues. Some of them simply asked: "Is this project alive?"

It is. Here is what happened, what changed, and how to upgrade.

Why it stopped

There was no big drama. At first, I just had no time for a few months. During that time, new issues kept coming. When I came back, the list was long, and every issue felt like a small debt.

Then the CI started to fail. The build broke on a clean checkout, the tests did not start in a modern Chrome, the demo deploy failed. Each fix needed hours I didn't have. So I pushed it to "later", again and again, until I was close to giving up.

This year I took the time to fix the boring part first: build, tests, CI, demo deploy. After that, answering issues felt possible again.

What the library does

You put a directive on an input:

<input ngxDaterangepickerMd [ranges]="ranges" [timePicker]="true" [(ngModel)]="selected" />

import dayjs from 'dayjs/esm';
import { DateRanges } from 'ngx-daterangepicker-material';

const ranges: DateRanges = {
  'Today': [dayjs(), dayjs()],
  'Yesterday': [dayjs().subtract(1, 'day'), dayjs().subtract(1, 'day')],
  'Last 7 days': [dayjs().subtract(6, 'day'), dayjs()],
  'This month': [dayjs().startOf('month'), dayjs().endOf('month')],
};

The value is { startDate, endDate }, as dayjs dates. If you build dashboards, reports or filters, you know why presets matter: users don't want to click 30 days on a calendar, they want to click "Last 30 days".

Catching up with Angular

The package now follows Angular versions: v16 works with Angular 16, v17 with Angular 17, and so on up to v22. The version number tells you the Angular version.

ng update only moves one major at a time, so I went through each one. At each step I built the library, created a fresh Angular app, installed the packed library in it, and checked in a real browser that picking a date really changes the value. That last check found bugs that my own build never showed, because a fresh app does not have the same config as my repo.

The latest version works with standalone components, SSR and zoneless apps, and ng add sets it up for you.

Fixing the backlog

Then I read every open issue, even the ones from 2018. Many bugs were real and still there: wrong dates with time zones, the calendar showing the wrong month, a calendar cut by mat-form-field, missing events...

Most of them are fixed now, each one with a test. The library had almost no tests before; it has about 140 now. Today there are about 13 open issues, and new issues get a reply.

What's new in 22.2

Signal Forms: [formField] works on the input and on the inline calendar (22.2.1).
[(ngModel)] and [formControl] work on the inline calendar.
[appendToBody]="true": the calendar is not cut anymore inside mat-form-field.
The calendar stays inside the window and follows the input on scroll.
Change the language at runtime with LocaleService.setConfig(), or give a signal to forRoot().
New events: cancelClicked and customRangeClicked.
[disabled] works without a form.

Why not the Angular Material date range picker?

Good question. I asked it to myself before spending weeks on this.

Material has a very good date range picker. But it has no predefined ranges (you can build them with a custom calendar header, but you write and maintain that code), no time on a range (the Material timepicker is for one date), and it uses two inputs.

This library has presets, a time picker, and one input where users can type or pick the whole range. It does not depend on @angular/material. It only looks like it, so it fits next to Material components, and works in apps without Material too.

What about other libraries? To be fair: ngx-bootstrap and ng-zorro also have presets and a time picker on ranges, and PrimeNG has the time picker. They are good choices if your app already uses them. But they come with their own design system. If you only need a date range picker, adding a whole UI kit for it is a lot. This library does one thing.

	Presets	Time on a range	Needs a UI kit
ngx-daterangepicker-material	yes	yes	no
Angular Material	no (custom code)	no	Angular Material
ngx-bootstrap	yes	yes	Bootstrap
ng-zorro	yes	yes	Ant Design
PrimeNG	no (custom template)	yes	PrimeNG

Coming from v6?

Most people still are: about 7 installs out of 10 are v6. If you saw a deprecation warning when running npm install, this is why. Versions before 16 are not maintained anymore.

"^6.0.4" in your package.json never moves to a newer major, so you have to choose the version yourself:

npm install ngx-daterangepicker-material@22   # for Angular 22

The API is the same: NgxDaterangepickerMd.forRoot(), the same inputs and outputs. A few things behave better now, and you may notice them. The most important one: the emitted dates are the real
local dates. If you added code to fix a timezone shift, remove it. The full list is in the README.

If something breaks during the upgrade, please open an issue. This is exactly what I want to hear about right now.

What is not great yet

I prefer to say it before you find it:

there is no keyboard navigation inside the calendar yet. This is an accessibility problem, and the most important missing feature;
the layout on small screens needs work;
the main component is still one big class of about 1,600 lines. It works, and it has tests now, but it will be split.

Next: v23

v23 will come with Angular 23. The plan is in a pinned issue: provideDaterangepicker() for standalone apps, signal inputs, keyboard support, and a few small breaking changes announced early. One choice is still open, and I want your opinion: should the calendar use Angular CDK Overlay? It would fix the calendar cut by mat-form-field without any option, but it adds @angular/cdk as a dependency. Please vote here, it takes ten seconds. Comments on the roadmap are welcome too.

Comments are welcome there.

Try it

ng add ngx-daterangepicker-material

You can help

If you use this library at work, the best help is simple: upgrade, and tell me if something broke.

If you want to write code, some issues have the good first issuelabel, and CONTRIBUTING.md explains how to start in a few commands. A star on GitHub also helps other people find the project.

One thing I learned

I thought bringing the project back would need a big plan and a rewrite. It didn't. It needed someone to answer the issues, one by one, and to ship small releases often. People are very patient with an open source project, as long as someone is there.

Thanks to everyone who kept using it, and to everyone who reported bugs and shared workarounds during the quiet years. You kept it alive.

DEV Community