@angular-primitives/date

A several dates utilities for different types of use cases:

• fromDiffBetweenDates - A reactive diff between dates.
• fromFormattedDiffBetweenDates - A reactive formatted diff between dates.

Installation

npm install @angular-primitives/date
# or
pnpm add @angular-primitives/date
# or
yarn add @angular-primitives/date

fromDiffBetweenDates(example)

• Reactive diff between dates

import { fromDiffBetweenDates } from "@angular-primitives/date";

@Component(
  ...
    template: `
        <input type="date" (change)="from.set($event.target.value)">
        <input type="date" (change)="to.set($event.target.value)">
        {{ diff() }}
    `
)
export class SomeComponent {
  from: WritableSignal<string> = signal('2023/01/01');
  to: WritableSignal<string>  = signal('2023/01/31');
  diff: Signal<Date> = fromDiffBetweenDates(this.from, this.to);
}

fromFormattedDiffBetweenDates(example)

• Formatted reactive diff between dates

import { fromFormattedDiffBetweenDates } from "@angular-primitives/date";

@Component(
  ...
    template: `
        <input type="date" (change)="from.set($event.target.value)">
        <input type="date" (change)="from.set($event.target.value)">
        {{ diff() }}
    `
)
export class SomeComponent {
  from: WritableSignal<string> = signal('2023/01/01');
  to: WritableSignal<string>  = signal('2023/01/31');
  diff: Signal<Date> = fromFormattedDiffBetweenDates(this.from, this.to);
}

• Formatted reactive diff between dates, example what is my age

import { fromFormattedDiffBetweenDates, DateIntervalEnum } from "@angular-primitives/date";

@Component(
  ...
    template: `
        <input type="date" (change)="birthDate.set($event.target.value)">
        {{ yourAge() }}
    `
)
export class SomeComponent {
  birthDate: WritableSignal<string> = signal('2023/01/01');
  yourAge: Signal<Date> = fromFormattedDiffBetweenDates(this.birthDate, signal(new Date()), [DateIntervalEnum.year]);
}