Form

DatePicker

A date field with a calendar — one date, several dates or a range, with time, typed or picked, as a popup, a touch dialog or inline. Works with reactive forms, ngModel and signal forms.

Features20

API

Theming

Basic

Click or focus the field to open the calendar, or type a date. The value is a Date.

Value: —

4 lines

<div class="stack">  <tx-datepicker ariaLabel="Delivery date" placeholder="Delivery date" [(ngModel)]="date" />  <span class="hint">Value: {{ date() ? date()!.toDateString() : '—' }}</span></div>

dateFormat shows and parses the date: dd / mm / yy, month and weekday names M / MM / D / DD, quoted literals. Without it the locale decides (mm/dd/yy in English, dd.mm.yy in Ukrainian), and so does the first day of the week.

11 lines

<div class="grid">  <tx-datepicker    ariaLabel="dd.mm.yy"    dateFormat="dd.mm.yy"    [firstDayOfWeek]="1"    [(ngModel)]="date"  />  <tx-datepicker ariaLabel="yy-mm-dd" dateFormat="yy-mm-dd" [(ngModel)]="date" />  <tx-datepicker ariaLabel="MM d, yy" dateFormat="MM d, yy" [(ngModel)]="date" />  <tx-datepicker ariaLabel="DD, d M yy" dateFormat="DD, d M yy" [(ngModel)]="date" /></div>

Icon

showIcon adds a calendar button joined to the field (iconDisplay="button") or an icon inside it (input); icon or a template changes it. showClear adds a clear button while there is a value.

31 lines

<div class="grid">  <tx-datepicker    ariaLabel="With a button"    placeholder="Button"    [showIcon]="true"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="With an icon"    placeholder="Icon"    [showIcon]="true"    iconDisplay="input"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="With a clear button"    placeholder="Clearable"    [showIcon]="true"    [showClear]="true"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="Own icon"    placeholder="Own icon"    [showIcon]="true"    iconDisplay="input"    [(ngModel)]="date"  >    <ng-template txDatePickerInputIcon><tx-icon name="clock" /></ng-template>  </tx-datepicker></div>

Range

selectionMode="range": the first click sets the start, the second the end; a click before the start starts again. While the end is not picked, the days up to the hovered (or keyboard-focused) day are highlighted, also across months. The value is [start, end].

Pick the first day.

12 lines

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

Multiple

selectionMode="multiple" collects dates — a second click removes one; maxDateCount sets the limit.

0 of 5 picked

11 lines

<div class="stack">  <tx-datepicker    ariaLabel="Shift days"    placeholder="Up to 5 shift days"    selectionMode="multiple"    [maxDateCount]="5"    [readonlyInput]="true"    [(ngModel)]="days"  />  <span class="hint">{{ days()?.length ?? 0 }} of 5 picked</span></div>

Limits

minDate / maxDate limit the range, disabledDays blocks weekdays (here weekends) and disabledDates single days. Typed dates outside the limits are not accepted.

10 lines

<tx-datepicker  ariaLabel="Appointment"  placeholder="Next 30 working days"  [showIcon]="true"  [minDate]="today"  [maxDate]="limit"  [disabledDays]="[0, 6]"  [disabledDates]="holidays"  [(ngModel)]="date"/>

Month year

view="month" picks a month and view="year" a year. In the date view the month and year in the header open the same grids.

18 lines

<div class="grid">  <tx-datepicker    ariaLabel="Billing month"    placeholder="Billing month"    view="month"    dateFormat="MM yy"    [showIcon]="true"    [(ngModel)]="month"  />  <tx-datepicker    ariaLabel="Fiscal year"    placeholder="Fiscal year"    view="year"    dateFormat="yy"    [showIcon]="true"    [(ngModel)]="year"  /></div>

Time

showTime adds hours and minutes (hold a button to spin), hourFormat="12" adds AM / PM, stepMinute / stepHour / stepSecond set the step, showSeconds adds seconds and timeOnly leaves only the time.

26 lines

<div class="grid">  <tx-datepicker    ariaLabel="Meeting"    placeholder="Date and time"    [showTime]="true"    [showIcon]="true"    [(ngModel)]="meeting"  />  <tx-datepicker    ariaLabel="Meeting, 12 hours"    placeholder="12-hour clock"    [showTime]="true"    hourFormat="12"    [stepMinute]="15"    [(ngModel)]="meeting"  />  <tx-datepicker    ariaLabel="Alarm"    placeholder="Time only"    [timeOnly]="true"    [showSeconds]="true"    [showIcon]="true"    icon="clock"    [(ngModel)]="alarm"  /></div>

Months

numberOfMonths shows months side by side; responsiveOptions shows fewer on narrow screens.

9 lines

<tx-datepicker  ariaLabel="Trip"  placeholder="Trip dates"  selectionMode="range"  [numberOfMonths]="2"  [responsiveOptions]="[{ breakpoint: '640px', numberOfMonths: 1 }]"  [showIcon]="true"  [(ngModel)]="trip"/>

Week

showWeek adds ISO week numbers. Days of the neighbour months can be picked; selectOtherMonths="false" only shows them and showOtherMonths="false" hides them.

21 lines

<div class="grid">  <tx-datepicker    ariaLabel="Sprint start"    placeholder="Week numbers"    [showWeek]="true"    [firstDayOfWeek]="1"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="Only this month"    placeholder="Hide other months"    [showOtherMonths]="false"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="Other months pickable"    placeholder="Pick other months"    [selectOtherMonths]="true"    [(ngModel)]="date"  /></div>

Button bar

showButtonBar adds Today and Clear under the calendar; a txDatePickerButtonBar template replaces them.

Inline

inline puts the calendar in the page instead of a popup.

Wk	Su	Mo	Tu	We	Th	Fr	Sa
45	1	2	3	4	5	6	7
46	8	9	10	11	12	13	14
47	15	16	17	18	19	20	21
48	22	23	24	25	26	27	28
49	29	30	1	2	3	4	5

Pick a day

9 lines

<div class="stack">  <tx-datepicker    ariaLabel="Delivery day"    [inline]="true"    [showWeek]="true"    [(ngModel)]="date"  />  <span class="hint">{{ date() ? date()!.toDateString() : 'Pick a day' }}</span></div>

Touch

touchUI opens the calendar as a centred dialog over a mask — comfortable on phones; with readonlyInput the on-screen keyboard stays closed.

Date template

A txDatePickerDate template draws each day; it gets the day with today, otherMonth and selectable.

15 lines

<tx-datepicker  ariaLabel="Event day"  placeholder="Days with events have a dot"  [showIcon]="true"  [(ngModel)]="date">  <ng-template txDatePickerDate let-day>    <span class="day">      {{ day.day }}      @if (hasEvent(day)) {        <span class="dot" aria-hidden="true"></span>      }    </span>  </ng-template></tx-datepicker>

Forms

A form control: tx-field links the label, hint and error, the field turns invalid with the control, and disabling the control disables the picker.

19 lines

<form class="form" (submit)="$event.preventDefault(); end.markAsTouched()">  <tx-field label="Contract end" hint="dd.mm.yy, today or later" [required]="true">    <tx-datepicker      dateFormat="dd.mm.yy"      [minDate]="today"      [showIcon]="true"      [fluid]="true"      [formControl]="end"    />  </tx-field>  <button txButton type="submit" label="Save" [disabled]="end.disabled"></button>  <button    txButton    type="button"    variant="text"    [label]="end.disabled ? 'Enable' : 'Disable'"    (click)="end.disabled ? end.enable() : end.disable()"  ></button></form>

Float label

Works inside tx-float-label and tx-ifta-label: the label moves while the field is focused, open or filled.

Start date

End date

10 lines

<div class="grid">  <tx-float-label variant="on">    <tx-datepicker inputId="float-date" [showIcon]="true" [fluid]="true" [(ngModel)]="start" />    <label for="float-date">Start date</label>  </tx-float-label>  <tx-ifta-label>    <tx-datepicker inputId="ifta-date" [fluid]="true" [(ngModel)]="end" />    <label for="ifta-date">End date</label>  </tx-ifta-label></div>

Sizes

size is small, medium or large, the same as every field; the icon button follows.

17 lines

<div class="stack">  <tx-datepicker    ariaLabel="Small"    placeholder="Small"    size="small"    [showIcon]="true"    [(ngModel)]="date"  />  <tx-datepicker ariaLabel="Medium" placeholder="Medium" [showIcon]="true" [(ngModel)]="date" />  <tx-datepicker    ariaLabel="Large"    placeholder="Large"    size="large"    [showIcon]="true"    [(ngModel)]="date"  /></div>

States

variant="filled", invalid, readonly and disabled look like every other field.

28 lines

<div class="grid">  <tx-datepicker    ariaLabel="Filled"    placeholder="Filled"    variant="filled"    [showIcon]="true"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="Invalid"    placeholder="Invalid"    [invalid]="true"    [showIcon]="true"    [(ngModel)]="date"  />  <tx-datepicker    ariaLabel="Read only"    [readonly]="true"    [showIcon]="true"    [(ngModel)]="filled"  />  <tx-datepicker    ariaLabel="Disabled"    [disabled]="true"    [showIcon]="true"    [(ngModel)]="filled"  /></div>

Design tokens

dt changes the tokens of one picker — here larger square days in the success colour.

Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

15 lines

<tx-datepicker  ariaLabel="Rounded days"  [inline]="true"  [(ngModel)]="date"  [dt]="{    panel: { padding: '16px', borderRadius: '20px' },    date: {      width: '32px',      height: '32px',      borderRadius: '10px',      selectedBackground: 'var(--tx-success-base)',    },    today: { background: 'transparent', color: 'var(--tx-success-base)' },  }"/>

Pass through

pt styles the parts — here a dashed header line and quieter weekday names.

Wk	Su	Mo	Tu	We	Th	Fr	Sa
45	1	2	3	4	5	6	7
46	8	9	10	11	12	13	14
47	15	16	17	18	19	20	21
48	22	23	24	25	26	27	28
49	29	30	1	2	3	4	5

Wk	Su	Mo	Tu	We	Th	Fr	Sa
45	1	2	3	4	5	6	7
46	8	9	10	11	12	13	14
47	15	16	17	18	19	20	21
48	22	23	24	25	26	27	28
49	29	30	1	2	3	4	5

Wk	Su	Mo	Tu	We	Th	Fr	Sa
45	1	2	3	4	5	6	7
46	8	9	10	11	12	13	14
47	15	16	17	18	19	20	21
48	22	23	24	25	26	27	28
49	29	30	1	2	3	4	5