0.0.3 • Published 6 months ago
@angular-primitives/date v0.0.3
@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]);
}