Skip to content

Commit c23724d

Browse files
jackofdiamond5jackofdiamond5
committed
feat(date-range): implementation #6271 
1 parent 20349cd commit c23724d

13 files changed

+209
-44
lines changed

‎projects/igniteui-angular/src/lib/date-range/README.md

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# igx-date-range Component
2+
3+
The `igx-date-range` component allows you to select a range of dates from a calendar which is presented into a single or two non-editable input fields.
4+
5+
A getting started guide can be found [here]().
6+
7+
## Dependencies
8+
In order to use the `igx-date-range` component you must import the `BrowserAnimationModule` **once** in your application:
9+
```typescript
10+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
11+
@NgModule({
12+
imports: [
13+
...
14+
BrowserAnimationsModule
15+
...
16+
]
17+
})
18+
export class AppModule { }
19+
```
20+
21+
# Usage
22+
Import the `IgxDateRangeModule` in the module that you want to use it in:
23+
```typescript
24+
import { IgxDateRangeModule } from 'igniteui-angular';
25+
26+
@NgModule({
27+
imports: [IgxDateRangeModule]
28+
})
29+
export class AppModule { }
30+
```
31+
32+
As for the component that you want to use `igx-date-range` in, import `IgxDateRangeComponent` and then declare it in the template, like so:
33+
34+
```typescript
35+
import { IgxDateRangeComponent } from 'igniteui-angular';
36+
37+
@Component({
38+
selector: 'my-component'
39+
template: `
40+
<igx-date-range>
41+
<input igxDateRange>
42+
</igx-date-range>`,
43+
44+
})
45+
export class MyComponent {
46+
@ViewChild(IgxDateRangeComponent, { read: IgxDateRangeComponent, static: false })
47+
public dateRange: IgxDateRangeComponent;
48+
}
49+
```
50+
51+
Basic initialization with a single input:
52+
```html
53+
<igx-date-range>
54+
<input igxDateRange>
55+
</igx-date-range>
56+
```
57+
58+
Basic initialization with two inputs:
59+
```html
60+
<igx-date-range>
61+
<input igxDateRangeStart>
62+
<input igxDateRangeEnd>
63+
</igx-date-range>
64+
```
65+
66+
`IgxDateRange` with `Today` and `Done` buttons:
67+
```html
68+
<igx-date-range [todayButtonText]="'Show Today'" [doneButtonText]="'Close'">
69+
<input igxDateRage>
70+
</igx-date-range>
71+
```
72+
73+
`IgxDateRange` with first day of the week set to `Monday` and handler when a range selection is made:
74+
```html
75+
<igx-date-range [weekStart]="2" (rangeSelected)="onRangeSelected($event)">
76+
<input igxDateRange>
77+
</igx-date-range>
78+
```
79+
80+
`IgxDateRange` that opens a calendar with more than `2` views and also hides days that are not part of each month:
81+
```html
82+
<igx-date-range [monthsViewNumber]="5" [hideOutsideDays]="'true'">
83+
<input igxDateRange>
84+
</igx-date-range>
85+
```
86+
87+
`IgxDateRange` in a drop `down-mode`, the `Done` button is only visible when in a `dialog` mode:
88+
```html
89+
<igx-date-range [mode]="'dropdown'">
90+
<input igxDateRange>
91+
</igx-date-range>
92+
```
93+
94+
95+
96+
# API
97+
98+
### Inputs
99+
| Name | Type | Description |
100+
|:-----------------|:-------------------|:------------|
101+
| mode | InteractionMode | Property which sets whether `IgxDateRangeComponent` is in dialog or dropdown mode. |
102+
| monthsViewNumber | number | Property which sets the number displayed month views. Default is `2`. |
103+
| hideOutsideDays | boolean | Property which sets the whether dates that are not part of the current month will be displayed. Default value is `false`. |
104+
| weekStart | number | Property which sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |
105+
| locale | string | Property which gets the `locale` of the calendar. Default value is `"en"`. |
106+
| formatter | function => string | Property that applies a custom formatter function on the selected or passed date. |
107+
| todayButtonText | string | Property that changes the default text of the `today` button. Default value is `Today`. |
108+
| doneButtonText | string | Property that changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
109+
| overlaySettings | OverlaySettings | Property that changes the default overlay settings used by the `IgxDateRangeComponent`. |
110+
111+
### Outputs
112+
| Name | Type | Description |
113+
|:-----------------|:----------------------|:------------|
114+
| rangeSelected | IgxDateRangeComponent | An event that is emitted when a full range was selected in the `IgxDateRangeComponent`. |
115+
| onOpened | IgxDateRangeComponent | An event that is emitted when the `IgxDateRangeComponent` is opened. |
116+
| onClosed | IgxDateRangeComponent | An event that is emitted when the `IgxDateRangeComponent` is closed. |
117+
118+
### Methods
119+
| Name | Arguments | Return Type | Description |
120+
|:-----------:|:--------------|:------------|:------------|
121+
| open | n/a | void | Opens the date picker's dropdown or dialog. |
122+
| close | n/a | void | Closes the date picker's dropdown or dialog. |
123+
| selectToday | n/a | void | Selects the today date if no previous selection is made. If there is a previous selection, it does a range selection to today. |
124+
| value | n/a | Date or Date[] | Gets the currently selected value / range from the calendar. |
125+
| selectRange | startDate, endDate | void | Selects a range of dates, cancels previous selection. |

‎projects/igniteui-angular/src/lib/date-range/igx-date-range-inputs.common.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export class IgxDateEndComponent extends IgxDateRangeBaseComponent { }
150150
/** @hidden @internal */
151151
@Component({
152152
selector: 'igx-date-single',
153-
templateUrl: 'igx-date-range-inputs.common.html',
153+
templateUrl: '../input-group/input-group.component.html',
154154
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateSingleComponent }]
155155
})
156156
export class IgxDateSingleComponent extends IgxDateRangeBaseComponent {

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.component.html

+3-8
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,9 @@
6969

7070
<ng-template #defTemplate>
7171
<igx-date-single>
72-
<!-- display format instead? what about shortDate, etc? -->
73-
<input #singleInput igxInput type="text" readonly
74-
[placeholder]="this.value ? '' : appliedFormat"
75-
role="combobox"
76-
aria-haspopup="grid"
77-
[attr.aria-expanded]="!this.toggleDirective?.collapsed"
78-
[attr.aria-labelledby]="this.label?.id"
79-
/>
72+
<input #singleInput igxInput type="text" readonly [placeholder]="this.value ? '' : appliedFormat"
73+
role="combobox" aria-haspopup="grid"
74+
[attr.aria-labelledby]="this.label?.id" />
8075

8176
<igx-prefix *ngIf="!this.prefix && !this.suffix" (click)="open()">
8277
<ng-container *ngTemplateOutlet="defIcon"></ng-container>

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.component.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ describe('IgxDateRange', () => {
2929
let calendarElement: DebugElement;
3030
let calendarWrapper: DebugElement;
3131

32-
let singleInputRange: DateRangeSingleInputTestComponent;
33-
let twoInputsRange: DateRangeTwoInputsTestComponent;
32+
// let singleInputRange: DateRangeSingleInputTestComponent;
33+
// let twoInputsRange: DateRangeTwoInputsTestComponent;
3434
let fixture: ComponentFixture<DateRangeTestComponent>;
3535

3636
beforeEach(async(() => {

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.component.ts

+11-7
Original file line numberDiff line numberDiff line change
@@ -507,7 +507,9 @@ export class IgxDateRangeComponent implements IToggleView, AfterViewInit, OnDest
507507
this.calendar.deselectDate();
508508
}
509509
}
510-
this.calendar.viewDate = this.value.start;
510+
if (this.value) {
511+
this.calendar.viewDate = this.value.start;
512+
}
511513
}
512514

513515
private extractRange(selection: Date[]): DateRange {
@@ -541,15 +543,17 @@ export class IgxDateRangeComponent implements IToggleView, AfterViewInit, OnDest
541543
if (this.hasProjectedInputs) {
542544
const start = this.projectedInputs.find(i => i instanceof IgxDateStartComponent) as IgxDateStartComponent;
543545
const end = this.projectedInputs.find(i => i instanceof IgxDateEndComponent) as IgxDateEndComponent;
544-
start.dateTimeEditor.valueChanged
546+
start.dateTimeEditor.valueChange
545547
.pipe(takeUntil(this._destroy))
546-
.subscribe((event: IgxDateTimeEditorEventArgs) => {
547-
this.value = { start: event.newValue as Date, end: this.value?.end };
548+
.subscribe((event: Date) => {
549+
// TODO: update
550+
// this.value = { start: event.newValue as Date, end: this.value?.end };
548551
});
549-
end.dateTimeEditor.valueChanged
552+
end.dateTimeEditor.valueChange
550553
.pipe(takeUntil(this._destroy))
551-
.subscribe((event: IgxDateTimeEditorEventArgs) => {
552-
this.value = { start: this.value?.start, end: event.newValue as Date };
554+
.subscribe((event: Date) => {
555+
// TODO: update
556+
// this.value = { start: this.value?.start, end: event.newValue as Date };
553557
});
554558
start.dateTimeEditor.validationFailed
555559
.pipe(takeUntil(this._destroy))

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.module.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
IgxDateStartComponent, IgxDateEndComponent,
1111
DateRangeFormatPipe,
1212
IgxDateRangePrefixDirective,
13-
IgxDateRangeSuffixDirective
13+
IgxDateRangeSuffixDirective,
14+
IgxDateSingleComponent
1415
} from './igx-date-range-inputs.common';
1516
import { IgxDateTimeEditorModule } from '../directives/date-time-editor';
1617

@@ -22,6 +23,7 @@ import { IgxDateTimeEditorModule } from '../directives/date-time-editor';
2223
IgxDateRangeComponent,
2324
IgxDateStartComponent,
2425
IgxDateEndComponent,
26+
IgxDateSingleComponent,
2527
DateRangeFormatPipe,
2628
IgxDateRangePrefixDirective,
2729
IgxDateRangeSuffixDirective
@@ -39,7 +41,6 @@ import { IgxDateTimeEditorModule } from '../directives/date-time-editor';
3941
IgxDateRangeComponent,
4042
IgxDateStartComponent,
4143
IgxDateEndComponent,
42-
DateRangeFormatPipe,
4344
IgxDateRangePrefixDirective,
4445
IgxDateRangeSuffixDirective
4546
]

‎projects/igniteui-angular/src/lib/date-range/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './igx-date-range-inputs.common';
2+
export * from './igx-date-range.component';
3+
export * from './igx-date-range.module';

‎projects/igniteui-angular/src/public_api.ts

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export * from './lib/time-picker/time-picker.component';
9393
export * from './lib/toast/toast.component';
9494
export * from './lib/select/index';
9595
export * from './lib/splitter/splitter.module';
96+
export * from './lib/date-range/index';
9697

9798

9899
/**

‎src/app/app.module.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NgModule } from '@angular/core';
66
import {
77
IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService,
88
IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule,
9-
IgxIconService, DisplayDensityToken, DisplayDensity, IgxDateTimeEditorModule, IgxButtonModule, IgxDateRangeModule
9+
IgxIconService, DisplayDensityToken, DisplayDensity, IgxDateTimeEditorModule, IgxButtonModule
1010
} from 'igniteui-angular';
1111
import { IgxColumnHidingModule } from 'igniteui-angular';
1212
import { SharedModule } from './shared/shared.module';
@@ -120,6 +120,7 @@ import { DateTimeEditorSampleComponent } from './date-time-editor/date-time-edit
120120
import { GridColumnSelectionSampleComponent, GridColumnSelectionFilterPipe } from './grid-column-selection/grid-column-selection.sample';
121121
import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
122122
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
123+
import { DateRangeSampleComponent } from './date-range/date-range.sample';
123124

124125
const components = [
125126
AppComponent,
@@ -231,7 +232,8 @@ const components = [
231232
GridExternalFilteringComponent,
232233
GridSaveStateComponent,
233234
AboutComponent,
234-
ReactiveFormSampleComponent
235+
ReactiveFormSampleComponent,
236+
DateRangeSampleComponent
235237
];
236238

237239
@NgModule({

‎src/app/date-range/date-range.sample.html

+2-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div style="padding: 30px;">
22
<div style="max-width: 300px;">
3-
<igx-date-range [mode]="'dialog'"></igx-date-range>
3+
<igx-date-range [mode]="'dropdown'"></igx-date-range>
44
</div>
55

66
<div style="max-width: 300px;">
@@ -9,7 +9,7 @@
99

1010
<div style="max-width: 300px;">
1111
<igx-date-range #dateRange [mode]="'dropdown'" [displayFormat]="'shortDate'" [(ngModel)]="range">
12-
<igx-prefix igxReplace></igx-prefix>
12+
<igx-prefix *igxDateRangePrefix></igx-prefix>
1313
<igx-suffix (click)="dateRange.open()">
1414
<igx-icon>
1515
calendar_view_day
@@ -49,30 +49,14 @@
4949
</igx-date-range>
5050

5151
</div>
52-
5352
<div style="display: flex; flex-flow: column;">
5453
<div>Valid: {{ formControl.valid }}</div>
5554
<div>Dirty: {{ formControl.dirty }}</div>
5655
<div>Touched: {{ formControl.touched }}</div>
5756
<div>Value: {{ formControl.value | json }}</div>
5857
</div>
59-
6058
</div>
6159

62-
63-
64-
65-
66-
67-
68-
69-
70-
71-
72-
73-
74-
75-
7660
<!-- <div class="content-wrap">
7761
<form class="book-room-form" [formGroup]="twoInputForm" (ngSubmit)="submitTwoInputForm()">
7862
<div class="container">

‎src/app/date-range/date-range.sample.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.inline {
2+
display: flex;
3+
flex-flow: row;
4+
padding-bottom: 50px;
5+
}
6+
7+
.content-wrap {
8+
margin: 32px;
9+
display: flex;
10+
flex-flow: row;
11+
justify-content: space-evenly;
12+
}
13+
14+
.container > * {
15+
margin-top: 32px;
16+
}
17+
18+
.book-room-form {
19+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
20+
padding: 24px;
21+
max-width: 500px;
22+
margin-bottom: 48px;
23+
display: flex;
24+
flex-flow: column;
25+
}
26+
27+
.date-range-wrapper {
28+
display: flex;
29+
flex-flow: row;
30+
justify-content: space-between;
31+
}
32+
33+
.button-wrap {
34+
display: flex;
35+
justify-content: space-between;
36+
}
37+
38+
.twoInputWrap {
39+
display: flex;
40+
justify-content: space-between;
41+
}

‎src/app/routing.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,15 @@ import { BottomNavRoutingSampleComponent } from './bottomnav-routing/bottomnav-r
3333
import {
3434
BottomNavRoutingView1Component,
3535
BottomNavRoutingView2Component,
36-
BottomNavRoutingView3Component } from './bottomnav-routing/bottomnav-routing-views.sample';
36+
BottomNavRoutingView3Component
37+
} from './bottomnav-routing/bottomnav-routing-views.sample';
3738
import { TabsSampleComponent } from './tabs/tabs.sample';
3839
import { TabsRoutingSampleComponent } from './tabs-routing/tabs-routing.sample';
3940
import {
4041
TabsRoutingView1Component,
4142
TabsRoutingView2Component,
42-
TabsRoutingView3Component } from './tabs-routing/tabs-routing-views.sample';
43+
TabsRoutingView3Component
44+
} from './tabs-routing/tabs-routing-views.sample';
4345
import { TimePickerSampleComponent } from './time-picker/time-picker.sample';
4446
import { ToastSampleComponent } from './toast/toast.sample';
4547
import { VirtualForSampleComponent } from './virtual-for-directive/virtual-for.sample';
@@ -97,6 +99,7 @@ import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-maste
9799
import { DateTimeEditorSampleComponent } from './date-time-editor/date-time-editor.sample';
98100
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
99101
import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
102+
import { DateRangeSampleComponent } from './date-range/date-range.sample';
100103

101104
const appRoutes = [
102105
{
@@ -477,6 +480,10 @@ const appRoutes = [
477480
{
478481
path: 'gridAbout',
479482
component: AboutComponent
483+
},
484+
{
485+
path: 'dateRange',
486+
component: DateRangeSampleComponent
480487
}
481488
];
482489

0 commit comments

Comments
 (0)