Skip to content

Commit dd97b0d

Browse files
kacheshmarovakacheshmarova
authored
Merge pull request #3711 from IgniteUI/bpachilova/drp-toggle-clear-icons-3710
feat(date-range-picker): add toggle and clear icons to both inputs
2 parents 3f91db4 + 33d23cc commit dd97b0d

File tree

6 files changed

+47
-6
lines changed

6 files changed

+47
-6
lines changed

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
<igx-picker-toggle igxPrefix>
55
<igx-icon>calendar_today</igx-icon>
66
</igx-picker-toggle>
7+
<igx-picker-clear igxSuffix>
8+
<igx-icon>clear</igx-icon>
9+
</igx-picker-clear>
710
</igx-date-range-start>
811
<igx-date-range-end>
12+
<igx-picker-toggle igxPrefix>
13+
<igx-icon>calendar_today</igx-icon>
14+
</igx-picker-toggle>
915
<input igxInput igxDateTimeEditor type="text">
16+
<igx-picker-clear igxSuffix>
17+
<igx-icon>clear</igx-icon>
18+
</igx-picker-clear>
1019
</igx-date-range-end>
1120
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Component } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxPickerClearComponent, IgxSuffixDirective } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-rangedatepicker-start-end',
77
styleUrls: ['./daterangepicker-start-end.scss'],
88
templateUrl: './daterangepicker-start-end.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
10+
IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective,
11+
IgxPickerClearComponent]
1012
})
1113
export class DateRangePickerStartEndComponent {
1214
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
<igx-picker-toggle igxPrefix>
55
<igx-icon>calendar_today</igx-icon>
66
</igx-picker-toggle>
7+
<igx-picker-clear igxSuffix>
8+
<igx-icon>clear</igx-icon>
9+
</igx-picker-clear>
710
</igx-date-range-start>
811
<igx-date-range-end>
12+
<igx-picker-toggle igxPrefix>
13+
<igx-icon>calendar_today</igx-icon>
14+
</igx-picker-toggle>
915
<input igxInput igxDateTimeEditor type="text">
16+
<igx-picker-clear igxSuffix>
17+
<igx-icon>clear</igx-icon>
18+
</igx-picker-clear>
1019
</igx-date-range-end>
1120
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Component, ElementRef, inject } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-styled-rangedatepicker',
77
styleUrls: ['./daterangepicker-styling.scss'],
88
templateUrl: './daterangepicker-styling.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
10+
IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent]
1011
})
1112
export class StyledDateRangePickerComponent {
1213
element = inject(ElementRef);

‎src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,19 @@
1010
</igx-picker-toggle>
1111
<label igxLabel>Start Date</label>
1212
<input igxInput igxDateTimeEditor type="text">
13+
<igx-picker-clear igxSuffix>
14+
<igx-icon>clear</igx-icon>
15+
</igx-picker-clear>
1316
</igx-date-range-start>
1417
<igx-date-range-end>
18+
<igx-picker-toggle igxPrefix>
19+
<igx-icon>calendar_today</igx-icon>
20+
</igx-picker-toggle>
1521
<label igxLabel>End Date</label>
1622
<input igxInput igxDateTimeEditor type="text">
23+
<igx-picker-clear igxSuffix>
24+
<igx-icon>clear</igx-icon>
25+
</igx-picker-clear>
1726
</igx-date-range-end>
1827
</igx-date-range-picker>
1928

@@ -24,9 +33,18 @@
2433
</igx-picker-toggle>
2534
<label igxLabel>Start Date</label>
2635
<input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
36+
<igx-picker-clear igxSuffix>
37+
<igx-icon>clear</igx-icon>
38+
</igx-picker-clear>
2739
</igx-date-range-start>
2840
<igx-date-range-end>
41+
<igx-picker-toggle igxPrefix>
42+
<igx-icon>calendar_today</igx-icon>
43+
</igx-picker-toggle>
2944
<label igxLabel>End Date</label>
3045
<input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
46+
<igx-picker-clear igxSuffix>
47+
<igx-icon>clear</igx-icon>
48+
</igx-picker-clear>
3149
</igx-date-range-end>
3250
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Component } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-daterangepicker-validation',
77
styleUrls: ['./daterangepicker-validation.scss'],
88
templateUrl: './daterangepicker-validation.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent,
10+
IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent,
11+
IgxSuffixDirective, IgxPickerClearComponent]
1012
})
1113
export class DateRangePickerValidationComponent {
1214
public rangeSingle: DateRange;

0 commit comments

Comments
 (0)