Utilities

Date

Dates in templates and code. The txDate pipe formats with Angular date patterns and shows - instead of an error for an empty or broken value; the calendar functions work on copies and count calendar days, so daylight saving time does not shift them.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features6

API

Theming

Basic

txDate takes a Date, an ISO string or a timestamp. Without a pattern it uses mediumDate; an empty or invalid value turns into -.


SO-2041	09.11.26 08:14	Nov 10, 2026
SO-2042	10.11.26 12:02	-
SO-2043	11.11.26 09:47	-

6 lines

<tx-table ariaLabel="Orders" dataKey="id" [value]="orders" [columns]="columns">  <ng-template txTableCell="created" let-value="value">{{    value | txDate: formats.dateTime  }}</ng-template>  <ng-template txTableCell="shipped" let-value="value">{{ value | txDate }}</ng-template></tx-table>

Formats

Any Angular date pattern or named format works. TX_DATE_FORMATS holds the common ones as constants.

dd.MM.yy HH:mm → 11.11.26 09:05

12 lines

<div class="stack">  <tx-datepicker    ariaLabel="Date and time"    [showTime]="true"    [showIcon]="true"    [(ngModel)]="date"  />  <tx-select ariaLabel="Pattern" [options]="patterns" [(ngModel)]="pattern" />  <span class="hint"    >{{ pattern() }} → <strong>{{ date() | txDate: pattern() }}</strong></span  ></div>

Defaults

provideTxDateFormat sets the pattern, the empty text, the locale and the time zone for an app or a part of it — here for this example only.


Hosting	1 Mar 2025	28 Feb 2027
Support	15 Jun 2026	Not set

4 lines

<tx-table ariaLabel="Contracts" dataKey="id" [value]="contracts" [columns]="columns">  <ng-template txTableCell="signed" let-value="value">{{ value | txDate }}</ng-template>  <ng-template txTableCell="ends" let-value="value">{{ value | txDate }}</ng-template></tx-table>

Time zone

The second argument is a time zone offset: one moment, shown for several offices.


Kyiv	+0200	Thu, 12 Nov 09:30
London	UTC	Thu, 12 Nov 07:30
New York	-0500	Thu, 12 Nov 02:30
Tokyo	+0900	Thu, 12 Nov 16:30

10 lines

<tx-table  ariaLabel="Release time per office"  dataKey="office"  [value]="offices"  [columns]="columns">  <ng-template txTableCell="time" let-office>{{    release | txDate: 'EEE, d MMM HH:mm' : office.offset  }}</ng-template></tx-table>

Date range

txDateRange turns the value of a range datepicker into { start, end } ISO strings for an API — null until both days are picked.

null

12 lines

<div class="stack">  <tx-datepicker    ariaLabel="Report period"    placeholder="Report period"    selectionMode="range"    [showIcon]="true"    [showClear]="true"    [readonlyInput]="true"    [(ngModel)]="period"  />  <code class="hint">{{ period() | txDateRange | json }}</code></div>

Calendar functions

Pure functions return a new Date and never change the one they get. Pick a day to see them work.


`addDays(day, 1)`	Sun, 01.02.2026 15:20
`addMonths(day, 1)`	Sat, 28.02.2026 15:20
`startOfWeek(day)`	Mon, 26.01.2026 00:00
`endOfDay(day)`	Sat, 31.01.2026 23:59
`toIsoDay(day)`	2026-01-31
`calendarDaysBetween(today, day)`	-284
`isExpiringWithin(day)`	yes

11 lines

<div class="layout">  <tx-datepicker ariaLabel="Day" [showIcon]="true" [(ngModel)]="day" />  <tx-table ariaLabel="Function results" dataKey="call" [value]="rows()" [columns]="columns">    <ng-template txTableCell="call" let-value="value"      ><code>{{ value }}</code></ng-template    >    <ng-template txTableCell="result" let-row>{{      row.date ? (row.date | txDate: 'EEE, dd.MM.yyyy HH:mm') : row.text    }}</ng-template>  </tx-table></div>