Taiga UI 5.0 is out!

CalendarRange KIT

Examples API GitHub

On this page

See also

Calendar, MobileCalendar, CalendarMonth

Component for choosing date range in calendar

Basic

April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
May
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
31 
    
      
    

      
      
    

  
    
      <tui-calendar-range />

With value

March
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
31
April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
{ "from": "2019-03-11", "to": "2019-03-14" } 
    
      
    

      
      
    

  
    
      <tui-calendar-range [(value)]="value" />
{{ value | json }}

With ranges

April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
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
6
7
8
9
10 
    
      
    

      
      
    

  
    
      <tui-calendar-range [items]="items" />

Localization

Use tuiCalendarOptionsProvider to change start day of the week (Monday by default)
April
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
May
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
31 
    
      
    

      
      
    

  
    
      <tui-calendar-range />

With another range switcher

April
Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
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
6
7
8
9
10 
    
      
    

      
      
    

  
    
      <tui-calendar-range
    [items]="items"
    [value]="value"
    [(item)]="selected"
    (valueChange)="onValue($event)"
/>

@if (isLastVisible) {
    <p>
        <button
            tuiLink
            type="button"
            (click)="reset()"
        >
            Reset
        </button>
    </p>
}

@if (isSelected && !isDefault) {
    <p>
        You are seeing {{ selected }}.
        @if (!isLastVisible) {
            <button
                tuiLink
                type="button"
                (click)="toggle()"
            >
                Switch to {{ opposite }}
            </button>
        }
    </p>
}
GitHub StackBlitz