Skip to content

Commit d4014e5

Browse files
ddinchevaddincheva
committed
feat(IgxCell): initial implementation of time and dateTime columns #7678 
1 parent 0555a17 commit d4014e5

File tree

6 files changed

+75
-12
lines changed

6 files changed

+75
-12
lines changed

‎projects/igniteui-angular/src/lib/data-operations/data-util.ts

+2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export const DataType = mkenum({
2525
Number: 'number',
2626
Boolean: 'boolean',
2727
Date: 'date',
28+
DateTime: 'dateTime',
29+
Time: 'time',
2830
Currency: 'currency',
2931
Percent: 'percent'
3032
});

‎projects/igniteui-angular/src/lib/grids/cell.component.html

+20-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
? (value | columnFormatter: formatter)
2121
: column.dataType === 'number'
2222
? (value | number:column.pipeArgs.digitsInfo:grid.locale)
23-
: column.dataType === 'date'
23+
: (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
2424
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
2525
: column.dataType === 'currency'
2626
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
@@ -37,7 +37,7 @@
3737
? (value | columnFormatter: formatter)
3838
: column.dataType === "number"
3939
? (value | number:column.pipeArgs.digitsInfo:grid.locale)
40-
: column.dataType === "date"
40+
: (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
4141
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
4242
: column.dataType === 'currency'
4343
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
@@ -57,7 +57,7 @@
5757
[activeCssClass]="activeHighlightClass"
5858
[groupName]="gridID"
5959
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ?
60-
(value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
60+
(value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?
6161
(value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?
6262
(value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?
6363
(value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
@@ -108,6 +108,23 @@
108108
>
109109
</igx-date-picker>
110110
</ng-container>
111+
<ng-container *ngIf="column.dataType === 'time'">
112+
<igx-time-picker
113+
[style.width.%]="100"
114+
[outlet]="grid.outlet"
115+
mode="dropdown"
116+
format="hh:mm:ss tt"
117+
[(value)]="editValue"
118+
[igxFocus]="true"
119+
>
120+
<label igxLabel></label>
121+
</igx-time-picker>
122+
</ng-container>
123+
<ng-container *ngIf="column.dataType === 'dateTime'">
124+
<igx-input-group>
125+
<input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy HH:mm tt'" [(ngModel)]="editValue" [igxFocus]="true"/>
126+
</igx-input-group>
127+
</ng-container>
111128
<ng-container *ngIf="column.dataType === 'currency'">
112129
<igx-input-group displayDensity="compact">
113130
<igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ import { IgxColumnGroupComponent } from './column-group.component';
5050
import { IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs, IPinColumnEventArgs } from '../common/events';
5151

5252
const DEFAULT_DATE_FORMAT = 'mediumDate';
53+
const DEFAULT_TIME_FORMAT = 'mediumTime';
54+
const DEFAULT_DATE_TIME_FORMAT = 'medium';
5355
const DEFAULT_DIGITS_INFO = '1.0-3';
5456

5557
/**
@@ -1530,7 +1532,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
15301532

15311533
private _field: string;
15321534
private _calcWidth = null;
1533-
private _columnPipeArgs: IColumnPipeArgs = { format: DEFAULT_DATE_FORMAT, digitsInfo: DEFAULT_DIGITS_INFO };
1535+
private _columnPipeArgs: IColumnPipeArgs = { digitsInfo: DEFAULT_DIGITS_INFO };
15341536

15351537
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef) { }
15361538

@@ -1568,6 +1570,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
15681570
if (this.filterCellTemplateDirective) {
15691571
this._filterCellTemplate = this.filterCellTemplateDirective.template;
15701572
}
1573+
if (!this._columnPipeArgs.format) {
1574+
this._columnPipeArgs.format = this.dataType === DataType.Time ? DEFAULT_TIME_FORMAT : this.dataType === DataType.DateTime?
1575+
DEFAULT_DATE_TIME_FORMAT : DEFAULT_DATE_FORMAT;
1576+
}
15711577
if (!this.summaries) {
15721578
switch (this.dataType) {
15731579
case DataType.String:
@@ -1578,6 +1584,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
15781584
this.summaries = IgxNumberSummaryOperand;
15791585
break;
15801586
case DataType.Date:
1587+
case DataType.DateTime:
1588+
case DataType.Time:
15811589
this.summaries = IgxDateSummaryOperand;
15821590
break;
15831591
case DataType.Currency:
@@ -1602,6 +1610,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
16021610
this.filters = IgxNumberFilteringOperand.instance();
16031611
break;
16041612
case DataType.Date:
1613+
case DataType.Time:
1614+
case DataType.DateTime:
16051615
this.filters = IgxDateFilteringOperand.instance();
16061616
break;
16071617
case DataType.String:

‎projects/igniteui-angular/src/lib/grids/common/shared.module.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import { IgxSelectModule } from '../../select/select.module';
2222
import { IgxDropDownModule } from '../../drop-down/public_api';
2323
import { IgxGridStateModule } from '../state.directive';
2424
import { IgxSnackbarModule } from '../../snackbar/snackbar.component';
25+
import { IgxTimePickerModule } from '../../time-picker/time-picker.component';
26+
import { IgxDateTimeEditorModule } from '../../directives/date-time-editor/date-time-editor.directive';
2527

2628

2729
@NgModule({
@@ -48,7 +50,9 @@ import { IgxSnackbarModule } from '../../snackbar/snackbar.component';
4850
IgxProgressBarModule,
4951
IgxSelectModule,
5052
IgxGridStateModule,
51-
IgxSnackbarModule
53+
IgxSnackbarModule,
54+
IgxTimePickerModule,
55+
IgxDateTimeEditorModule
5256
],
5357
exports: [
5458
CommonModule,
@@ -73,7 +77,9 @@ import { IgxSnackbarModule } from '../../snackbar/snackbar.component';
7377
IgxButtonGroupModule,
7478
IgxProgressBarModule,
7579
IgxSelectModule,
76-
IgxSnackbarModule
80+
IgxSnackbarModule,
81+
IgxTimePickerModule,
82+
IgxDateTimeEditorModule
7783
]
7884
})
7985
export class IgxGridSharedModules {}

‎projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

+14-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
[value]="formatter ? (value | columnFormatter: formatter)
1010
: column.dataType === 'number'
1111
? (value | number:column.pipeArgs.digitsInfo:grid.locale)
12-
: column.dataType === 'date'
12+
: (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
1313
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
1414
: column.dataType === 'currency'
1515
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
@@ -18,7 +18,7 @@
1818
[column]="this.column.field"
1919
[containerClass]="'igx-grid__td-text'"
2020
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter: formatter) : column.dataType === "number"
21-
? (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === "date"
21+
? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
2222
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
2323
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
2424
? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value }}</div>
@@ -29,7 +29,7 @@
2929
[activeCssClass]="activeHighlightClass"
3030
[groupName]="gridID"
3131
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ?
32-
(value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
32+
(value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?
3333
(value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?
3434
(value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?
3535
(value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
@@ -59,6 +59,17 @@
5959
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
6060
</igx-date-picker>
6161
</ng-container>
62+
<ng-container *ngIf="column.dataType === 'time'">
63+
<igx-time-picker [style.width.%]="100" [outlet]="grid.outlet"
64+
mode="dropdown" format="hh:mm:ss tt" [(value)]="editValue" [igxFocus]="true" >
65+
<label igxLabel></label>
66+
</igx-time-picker>
67+
</ng-container>
68+
<ng-container *ngIf="column.dataType === 'dateTime'">
69+
<igx-input-group>
70+
<input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy HH:mm tt'" [(ngModel)]="editValue" [igxFocus]="true"/>
71+
</igx-input-group>
72+
</ng-container>
6273
<ng-container *ngIf="column.dataType === 'currency'">
6374
<igx-input-group displayDensity="compact">
6475
<igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

+20-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
? (value | columnFormatter: formatter)
2121
: column.dataType === 'number'
2222
? (value | number:column.pipeArgs.digitsInfo:grid.locale)
23-
: column.dataType === 'date'
23+
: (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
2424
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
2525
: column.dataType === 'currency'
2626
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
@@ -37,7 +37,7 @@
3737
? (value | columnFormatter: formatter)
3838
: column.dataType === "number"
3939
? (value | number:column.pipeArgs.digitsInfo:grid.locale)
40-
: column.dataType === "date"
40+
: (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
4141
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
4242
: column.dataType === 'currency'
4343
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
@@ -57,7 +57,7 @@
5757
[activeCssClass]="activeHighlightClass"
5858
[groupName]="gridID"
5959
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ?
60-
(value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
60+
(value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?
6161
(value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?
6262
(value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?
6363
(value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
@@ -103,6 +103,23 @@
103103
>
104104
</igx-date-picker>
105105
</ng-container>
106+
<ng-container *ngIf="column.dataType === 'time'">
107+
<igx-time-picker
108+
[style.width.%]="100"
109+
[outlet]="grid.outlet"
110+
mode="dropdown"
111+
format="hh:mm:ss tt"
112+
[(value)]="editValue"
113+
[igxFocus]="true"
114+
>
115+
<label igxLabel></label>
116+
</igx-time-picker>
117+
</ng-container>
118+
<ng-container *ngIf="column.dataType === 'dateTime'">
119+
<igx-input-group>
120+
<input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy HH:mm tt'" [(ngModel)]="editValue" [igxFocus]="true"/>
121+
</igx-input-group>
122+
</ng-container>
106123
<ng-container *ngIf="column.dataType === 'currency'">
107124
<igx-input-group displayDensity="compact">
108125
<igx-prefix *ngIf="grid.currencyPositionLeft">{{ currencyCodeSymbol }}</igx-prefix>

0 commit comments

Comments
 (0)