Taiga UI 5 is out!

InputDateMulti KIT

Examples API GitHub

On this page

InputDateMulti uses specifically modified InputChip to represent array of dates.

Basic

06.07.2025
    
      
    

      
      
    

  
    
      <tui-textfield multi>
    <label tuiLabel>Plain strings</label>

    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar *tuiDropdown />
</tui-textfield>

Chip

Use *tuiItem directive to provide custom representation. You can use tui-input-chip out of the box or implement your own. The context is TuiContext<{ item: T, index: number }>
06.07.2025 
    
      
    

      
      
    

  
    
      <tui-textfield multi>
    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar *tuiDropdown />

    <tui-input-chip *tuiItem />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: block;
    inline-size: 20rem;
}

Disabled items

06.07.2025 
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    [disabledItemHandler]="handler"
>
    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar *tuiDropdown />

    <tui-input-chip *tuiItem />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: block;
    inline-size: 20rem;
}

Format

Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper
07/06/2025
07/06/2025
    
      
    

      
      
    

  
    
      <tui-textfield multi>
    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar *tuiDropdown />

    <tui-input-chip *tuiItem />
</tui-textfield>

<tui-textfield multi>
    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar *tuiDropdown />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    inline-size: 20rem;
}

customization

04.07.2025
06.07.2025 
    
      
    

      
      
    

  
    
      <tui-textfield multi>
    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar
        *tuiDropdown
        [markerHandler]="markerHandler"
    />

    <tui-input-chip
        *tuiItem="let context"
        [appearance]="context.item.dayOfWeek() > 4 ? 'negative' : 'positive'"
        [iconStart]="context.item.dayOfWeek() > 4 ? '@tui.heart' : ''"
    />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: block;
    inline-size: 22rem;
}

Value transformer

By default component works with our internal type called TuiDay . If you prefer to use anything else, like a string or native Date you can provide custom transformer in options to store value in different format in form control
11.05.202612.05.202613.05.2026

[ "2026-05-11T00:00:00.000Z", "2026-05-12T00:00:00.000Z", "2026-05-13T00:00:00.000Z" ]

    
      
    

      
      
    

  
    
      <tui-textfield multi>
    <label tuiLabel>Choose a date</label>

    <input
        tuiInputDateMulti
        [(ngModel)]="value"
    />

    <tui-calendar *tuiDropdown />
</tui-textfield>

<p>{{ value | json }}</p>
GitHub StackBlitz