u/domino_angularovic

[Showcase] ngx-signal-datetimepicker ? a zero-deps datetime picker built on Signal Forms (WCAG 2.2 AAA out of the box)

[Showcase] ngx-signal-datetimepicker ? a zero-deps datetime picker built on Signal Forms (WCAG 2.2 AAA out of the box)

https://i.redd.it/2h4d6kdvf12h1.gif

Live demo: https://ngx-signal-datetimepicker.vercel.app

Repo: https://github.com/dominikmodrzejewski99/ngx-signal-datetimepicker

npm: https://www.npmjs.com/package/ngx-signal-datetimepicker

Why this exists

Every Angular project I've worked on eventually needs "let the user pick a date and a time". Material gives you two separate controls, ngx-bootstrap is heavy, ng-zorro pulls a whole UI kit. Nothing in the ecosystem is small, framework-native, and exposes one combined Date | null value that plugs straight into the new Signal Forms API.

The approach

One component. One value. Signal Forms support via [formField] and FormValueControl<Date | null> - so required, min, max, validators, touched/dirty, errors all work out of the box. Reactive Forms users get ControlValueAccessor for free. Zero runtime deps - no moment, no dayjs, no Angular Material. Built on Intl.DateTimeFormat for locale labels and IANA timezone support. WCAG 2.2 AAA: keyboard nav, focus management, AAA contrast tokens, 44px target sizes.

One snippet

import { signal } from '@angular/core';
import { form } from '@angular/forms/signals';
import { DatetimePickerComponent } from 'ngx-signal-datetimepicker';

model = signal<Date | null>(null);
f = form(this.model);

<ngx-datetime-picker [formField]="f" label="Meeting" />

Feedback very welcome - especially edge cases I haven't hit (RTL locales, edge timezones, big-screen Material 3 themes). Issues and Discussions are open. Currently on 0.1.x, holding off on 1.0 until the API is settled by real users.

reddit.com
u/domino_angularovic — 3 days ago

[Showcase] ngx-signal-datetimepicker - a zero-deps datetime picker built on Signal Forms (WCAG 2.2 AAA out of the box)

Live demo: https://ngx-signal-datetimepicker.vercel.app

Repo: https://github.com/dominikmodrzejewski99/ngx-signal-datetimepicker

npm: https://www.npmjs.com/package/ngx-signal-datetimepicker

Why this exists

Every Angular project I've worked on eventually needs "let the user pick a date and a time". Material gives you two separate controls, ngx-bootstrap is heavy, ng-zorro pulls a whole UI kit. Nothing in the ecosystem is small, framework-native, and exposes one combined Date | null value that plugs straight into the new Signal Forms API.

The approach

One component. One value. Signal Forms support via [formField] and FormValueControl<Date | null> - so required, min, max, validators, touched/dirty, errors all work out of the box. Reactive Forms users get ControlValueAccessor for free. Zero runtime deps - no moment, no dayjs, no Angular Material. Built on Intl.DateTimeFormat for locale labels and IANA timezone support. WCAG 2.2 AAA: keyboard nav, focus management, AAA contrast tokens, 44px target sizes.

One snippet

import { signal } from '@angular/core';
import { form } from '@angular/forms/signals';
import { DatetimePickerComponent } from 'ngx-signal-datetimepicker';

model = signal<Date | null>(null);
f = form(this.model);
<ngx-datetime-picker [formField]="f" label="Meeting" />

Feedback very welcome - especially edge cases I haven't hit (RTL locales, edge timezones, big-screen Material 3 themes). Issues and Discussions are open. Currently on 0.1.x, holding off on 1.0 until the API is settled by real users.

u/domino_angularovic — 3 days ago