ngx-pm-wheel-date-picker

A standalone wheel-style date/time picker for Angular, on the Jalali (Persian/Shamsi) calendar. Inline or modal (bottom-sheet) mode, optional time selection, leap years handled correctly, themeable via CSS custom properties. No required stylesheet import, no icon font, no dependency on any particular design system — it works next to Tailwind, Material, or plain CSS alike.

▶ Try it on StackBlitz

• 📅 Full Jalali calendar math (via dayjs + jalaliday), leap years included
• 🎡 Wheel-style scroll-snap picker for day / month / year, and optionally hour / minute
• 🪟 Two modes: inline (always open) or modal (input-like trigger, opens a CDK-dialog bottom sheet)
• 🌗 Light/dark theming through CSS custom properties, with sensible fallback values
• 🈂️ RTL-friendly — inherits direction from the document, same as the rest of your app
• 📦 Angular Package Format build (works with any Angular ≥ 21 app), zero required global stylesheet beyond the standard @angular/cdk overlay CSS

npm install ngx-pm-wheel-date-picker dayjs jalaliday

See projects/ngx-pm-wheel-date-picker/README.md (also published to npm alongside the package) for full usage, the inputs table, and the CSS variables reference.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { WheelDatePickerComponent } from 'ngx-pm-wheel-date-picker';

@Component({
  standalone: true,
  imports: [WheelDatePickerComponent],
  template: `<wdp-wheel-date-picker [control]="birthDate" label="تاریخ تولد" />`,
})
export class ExampleComponent {
  birthDate = new FormControl('', { nonNullable: true });
}

This is an Angular CLI workspace with two projects:

projects/
  ngx-pm-wheel-date-picker/   the publishable library (this is what ships to npm)
  demo/                       a small showcase app — also what StackBlitz opens

npm install
npm run build:lib     # builds the library into dist/ngx-pm-wheel-date-picker once
npm run start:demo    # serves the demo app at http://localhost:4300

The demo app resolves ngx-pm-wheel-date-picker from dist/ via a TypeScript path mapping (tsconfig.json), the same way any consumer would resolve it from node_modules — so build:lib must run at least once before start:demo picks up the library.

npm run build:lib
cd dist/ngx-pm-wheel-date-picker
npm publish --access public

npm run pack:lib builds and produces a local .tgz tarball (via npm pack) if you want to inspect or install it locally before publishing.

MIT — see LICENSE.