DatePicker EXPERIMENTAL

    
      
    

      
        Copy
      
      
    
  

    
      <form
    tuiForm
    [formGroup]="form"
>
    <tui-textfield [disabledItemHandler]="disabledItemHandler">
        <label tuiLabel>Single date</label>
        <input
            formControlName="single"
            tuiInputDate
            [max]="max"
            [min]="min"
        />
        <tui-date-picker *tuiDropdown />
    </tui-textfield>

    <tui-textfield
        multi
        [disabledItemHandler]="disabledItemHandler"
    >
        <label tuiLabel>Multiple dates</label>
        <input
            formControlName="multi"
            tuiInputDateMulti
            [max]="max"
            [min]="min"
        />
        <tui-date-picker *tuiDropdown />
    </tui-textfield>

    <tui-textfield [disabledItemHandler]="disabledItemHandler">
        <label tuiLabel>Date range</label>
        <input
            formControlName="range"
            tuiInputDateRange
            [max]="max"
            [min]="min"
        />
        <tui-date-picker
            *tuiDropdown
            mode="range"
        />
    </tui-textfield>
</form>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-textfield>
    <label tuiLabel>Select date</label>
    <input
        tuiInputDate
        [(ngModel)]="value"
    />
    <tui-date-picker
        *tuiDropdown
        [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>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    aria-label="Select date"
    iconEnd="@tui.calendar"
    tuiButton
    tuiButtonSelect
    [(ngModel)]="value"
>
    {{ value() || 'Select date' }}
    <div *tuiDropdown="let close">
        <tui-date-picker />
        <button
            appearance="action"
            size="m"
            tuiButton
            type="button"
            [style.inline-size.%]="100"
            (click)="value.set(null); close()"
        >
            Clear
        </button>
    </div>
</button>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-textfield multi>
    <label tuiLabel>Pick days off</label>
    <input
        tuiInputDateMulti
        [ngModel]="value()"
        (ngModelChange)="onValueChange($event)"
    />
    <div
        *tuiDropdown
        [style.display]="'flex'"
    >
        <tui-date-picker
            [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 }}
                    @if (current() === $index) {
                        <tui-icon icon="@tui.check" />
                    }
                </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>

    

      
        Copy
      
      
    
  

    
      tui-date-picker [data-type~='other']::before {
    opacity: var(--tui-disabled-opacity);
}

tui-date-picker .hint {
    position: absolute;
    inset: 0;
}

    

      
        Copy