<form
tuiForm
[formGroup]="form"
>
<tui-textfield [disabledItemHandler]="disabledItemHandler">
<label tuiLabel>Single date</label>
<input
formControlName="single"
tuiInputDate
[max]="max"
[min]="min"
/>
<tui-calendar
*tuiDropdown
new
/>
</tui-textfield>
<tui-textfield
multi
[disabledItemHandler]="disabledItemHandler"
>
<label tuiLabel>Multiple dates</label>
<input
formControlName="multi"
tuiInputDateMulti
[max]="max"
[min]="min"
/>
<tui-calendar
*tuiDropdown
new
/>
</tui-textfield>
<tui-textfield [disabledItemHandler]="disabledItemHandler">
<label tuiLabel>Date range</label>
<input
formControlName="range"
tuiInputDateRange
[max]="max"
[min]="min"
/>
<tui-calendar
*tuiDropdown
mode="range"
new
/>
</tui-textfield>
</form>
Title is used.
<tui-textfield>
<label tuiLabel>Select date</label>
<input
tuiInputDate
[(ngModel)]="value"
/>
<tui-calendar
*tuiDropdown
new
[contentDay]="day"
[contentMonth]="month"
/>
<ng-template
#day
let-date
>
<span tuiTitle>
{{ date.day }}
<span tuiSubtitle>{{ getLabel(date) }}</span>
</span>
</ng-template>
<ng-template
#month
let-date
>
<span tuiTitle>
{{ date.toUtcNativeDate() | date: 'MMM' }}
<span tuiSubtitle>{{ date.year }}</span>
</span>
</ng-template>
</tui-textfield>
<button
aria-label="Select date"
iconEnd="@tui.calendar"
tuiButton
tuiButtonSelect
[(ngModel)]="value"
>
{{ value() || 'Select date' }}
<div *tuiDropdown="let close">
<tui-calendar new />
<button
appearance="action"
size="m"
tuiButton
type="button"
[style.inline-size.%]="100"
(click)="value.set(null); close()"
>
Clear
</button>
</div>
</button>
<tui-textfield multi>
<label tuiLabel>Pick days off</label>
<input
tuiInputDateMulti
[ngModel]="value()"
(ngModelChange)="onValueChange($event)"
/>
<div
*tuiDropdown
[style.display]="'flex'"
[style.flex-wrap]="'wrap'"
>
<tui-calendar
new
[contentDay]="content"
[dayType]="dayType()"
[showAdjacent]="true"
[showWeek]="true"
/>
<tui-data-list>
@for (user of users; track $index) {
<button
tuiOption
(click)="current.set($index)"
>
<span [tuiAvatar]="user | tuiInitials"></span>
{{ user }}
<tui-icon
icon="@tui.check"
[style.visibility]="current() !== $index ? 'hidden' : ''"
/>
</button>
}
</tui-data-list>
<ng-template
#content
let-day
>
{{ day.day }}
@if (getHint(day); as hint) {
<span
tuiHintDirection="top"
class="hint"
[tuiHint]="hint"
></span>
}
</ng-template>
</div>
</tui-textfield>
tui-date-picker [data-type~='other']::before {
opacity: var(--tui-disabled-opacity);
}
tui-date-picker .hint {
position: absolute;
inset: 0;
}
<tui-calendar
[disabledItemHandler]="disabledItemHandler"
[max]="max"
[min]="min"
[months]="2"
[(value)]="value"
/>
<button
tuiButton
type="button"
(click)="sheet.set(true)"
>
{{ day() ?? 'Sheet' }}
</button>
<button
tuiButton
type="button"
(click)="dialog.set(true)"
>
{{ range() ?? 'Dialog' }}
</button>
<ng-template
let-observer
[tuiSheetDialogOptions]="{appearance: 'fullscreen', bar: false, closable: false}"
[(tuiSheetDialog)]="sheet"
>
<header>
<tui-app-bar>
<button
tuiButton
tuiSlot="start"
type="button"
(click)="observer.complete()"
>
Back
</button>
Select date
<button
tuiButton
tuiSlot="end"
type="button"
(click)="day.set(today); observer.complete()"
>
Today
</button>
</tui-app-bar>
</header>
<tui-calendar-mobile
#calendar
mode="single"
[value]="day()"
/>
@if (calendar.value(); as selected) {
<div class="footer">
<footer tuiFloatingContainer="transparent">
@if (day() === selected) {
<button
tuiButton
type="button"
(click)="day.set(null); observer.complete()"
>
Clear
</button>
} @else {
<button
tuiButton
type="button"
(click)="day.set(selected); observer.complete()"
>
Select {{ calendar.value() }}
</button>
}
</footer>
</div>
}
</ng-template>
<ng-template
let-observer
[tuiDialogOptions]="{appearance: 'fullscreen'}"
[(tuiDialog)]="dialog"
>
<tui-app-bar>
<button
tuiButton
tuiSlot="start"
type="button"
(click)="observer.complete()"
>
Back
</button>
Select range
<button
tuiButton
tuiSlot="end"
type="button"
(click)="range.set(null); observer.complete()"
>
Clear
</button>
</tui-app-bar>
<tui-calendar-mobile
#calendar
mode="range"
[min]="today"
[value]="range()"
/>
@if (calendar.value()) {
<tui-bottom-sheet
tuiAnimated
[bar]="false"
[stops]="[]"
>
<div
tuiItemGroup
[horizontal]="true"
>
@for (item of items; track $index) {
<button
tuiChip
type="button"
(click)="range.set(item.range); observer.complete()"
>
{{ item }}
</button>
}
</div>
<footer tuiFloatingContainer>
<button
tuiButton
type="button"
(click)="range.set(calendar.value()); observer.complete()"
>
Select dates
</button>
<p>{{ calendar.value() }}</p>
</footer>
</tui-bottom-sheet>
}
</ng-template>
:host {
display: flex;
gap: 1rem;
}
.footer {
display: flex;
max-block-size: 0;
align-items: flex-end;
}
[tuiFloatingContainer] {
inline-size: 100%;
}
tui-bottom-sheet {
position: fixed;
inset: auto 0 calc(max(1rem, env(safe-area-inset-bottom)) - 2rem);
margin: auto;
block-size: fit-content;
--tui-from: translateY(100%);
&.tui-enter,
&.tui-leave {
animation-name: tuiSlide;
}
[tuiItemGroup] {
padding: 0 1rem;
margin: 0.25rem -1rem 0;
}
[tuiFloatingContainer] {
animation: none;
padding: 0;
}
}