Skip to content

Commit

Permalink
editable date picker (#3583)
Browse files Browse the repository at this point in the history
* feat(date-picker): Initial changes to support edit field #3034

* refactor(themes): update date-picker theme after refactor

* feat(date-picker): Fixes in editable date-picker #3034

* feat(date-picker): Implementing edit mode #3034

* feat(date-picker): More changes #3034

* feat(date-picker): Added spinning of the date parts #3034

* feat(date-picker): Added spinning functionality and other fixes #3034

* feat(date-picker): Spinning issues fixes #3034

* chore(*): Some code changes

* feat(date-picker): Resolved merged changes #3034

* feat(date-picker): Reworked parts in editable mode #3034

* fix(igxCalendar): add trackBy for months and years, #3595

If calendar is shown in overlay, the overlay saves a reference
to calendar elementRef. Month and Year templates add click event
via host listener. However, both templates redraw themselves.
As a result of this elements, where the click event was added,
are lost. As a result click does not fire. To fix this we added
trackBy in ngFor both for Month and Year templates.

* feat(date-picker): Added spinning on mouse wheel #3583

* feat(date-picker): Added more functionality #3583

* feat(date-picker): Fixes in editing and spinning date parts #3583

* feat(date-picker): Added infinite loop when spinning #3583

* feat(date-picker): Fixes in editable date-picker #3583

* feat(date-picker): Fixes in edit mode #3583

* feat(date-picker): Fixes, refactoring #3583

* feat(date-picker): Disabled/special dates handling #3583

* feat(date-picker): Fixes in editable mode #3583

* feat(date-picker): Fixes in tests #3583

* feat(date-picker): Calendar and buttons added to new component #3583

* feat(date-picker): Fixed spinning of long months names #3583

* feat(date-picker): Fixed existing tests, refactoring #3583

* feat(date-picker): Reworked code, overlay settings exposed #3583

* feat(date-picker): Fixed styles bindings #3583

* fix(date-picker): Fixes in edit mode #3583

* fix(date-picker): Fixes, added tests for edit mode #3583

* fix(date-picker): Added alt+up key behavior, added tests #3583

* fix(date-picker): Fixed check for days in month #3583

* fix(date-picker): Fixes in edit mode #3583

* fix(date-picker): Changed date-picker mode in grid #3583

* fix(date-picker): Fixes in code and tests #3583

* feat(date-picker): Added some API comments and fixes #3583

* feat(date-picker): Added info in docs, fixed method name #3583

* fix(igx-grid): Add filter-row date-picker in grid's outlet, #3034

* feat(date-picker): fix broken behaviors after calendar merge #3583

* fix(date-picker): Requested changes done #3583

* fix(date-picker): Fixes in date-picker #3583

* fix(date-picker): Fixes in code #3583

* fix(date-picker): Fix in calendar opening #3583

* fix(grid): Enabled key down event for date-picker editor #3583

* fix(grid): failing tests #3583

* fix(grid): Removed not needed brackets #3583

* fix(grid): Removed unused openDialog event argument #3583

* fix(date-picker): Stopped propagation of spinning events #3583

* fix(date-picker): Fixed empty mask #3583

* fix(grid): failing test for locale #3583

* chore(*): try fixing flickering test #3583

* test(date-picker): Added new tests, fixes #3583

* test(date-picker): Fixed failing focus test #3583

* test(grid): remove detectChanges #3583

* test(date-picker): Added tests for editable date-picker #3583

* test(grid): enter edit mode -> update -> exit edit mode -> check #3583

* test(grid): use API calls to methods instead of using shift+tab #3583

* test(date-picker): Added more tests for editable date picker #3583
  • Loading branch information
sboykova authored and bkulov committed Feb 20, 2019
1 parent ae28a95 commit a311c0c
Show file tree
Hide file tree
Showing 35 changed files with 2,602 additions and 611 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,12 @@ All notable changes for each version of this project will be documented in this
- `igxOverlay.attach(component, settings?)` method added. Use this method to obtain an unique Id of the created overlay where the provided component will be shown. Then call `igxOverlay.show(id, settings?)` method to show the component in overlay.
- `igxOverlay.show(component, settings)` is **depricated**. Use `igxOverlay.attach(component, settings?)` method to obtain an Id, and then call `igxOverlay.show(id, settings)` method to show a component in the overlay.

- `igx-date-picker`
- **Feature** Added editable `mode` to enable the input field value editing and spinning of the date parts. Example:
```html
<igx-date-picker #editableDatePicker1 mode="editable" [value]="date" format="dd.MM.y" mask="M/d/y">
</igx-date-picker>
```
**Components roundness**
- Ignite UI for Angular now allows you to change the shape of components by changing their border-radius.

Expand Down
46 changes: 18 additions & 28 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,29 @@
</ng-template>

<ng-template let-result #defaultMonth>
<span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()" class="igx-calendar-picker__date">
<span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
class="igx-calendar-picker__date">
{{ formattedMonth(viewDate) }}
</span>
<span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
<span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
class="igx-calendar-picker__date">
{{ formattedYear(viewDate) }}
</span>
</ng-template>

<div *ngIf="selection === 'single'" class="igx-calendar__header">
<div *ngIf="selection === 'single' && hasHeader" class="igx-calendar__header">
<h5 class="igx-calendar__header-year">{{ formattedYear(headerDate) }}</h5>
<h2 class="igx-calendar__header-date">
<ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate : defaultHeader; context: headerContext">
</ng-container>
</h2>
</div>

<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()"
(swipeleft)="nextMonth()">
<div class="igx-calendar-picker">
<div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)" (click)="previousMonth()">
<div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)"
(click)="previousMonth()">
<igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
</div>
<div>
Expand All @@ -34,31 +38,17 @@ <h2 class="igx-calendar__header-date">
</div>
</div>

<igx-days-view [changeDaysView]="true" #days
[animationAction]="monthAction"
[locale]="locale"
[value]="value"
[weekStart]="weekStart"
[formatOptions]="formatOptions"
[viewDate]="viewDate"
[selection]="selection"
[disabledDates]="disabledDates"
[specialDates]="specialDates"
(onViewChanged)="viewChanged($event)"
(onDateSelection)="childClicked($event)">
<igx-days-view [changeDaysView]="true" #days [animationAction]="monthAction" [locale]="locale" [value]="value"
[weekStart]="weekStart" [formatOptions]="formatOptions" [viewDate]="viewDate" [selection]="selection"
[disabledDates]="disabledDates" [specialDates]="specialDates" (onViewChanged)="viewChanged($event)"
(onDateSelection)="childClicked($event)">
</igx-days-view>
</div>

<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
[date]="viewDate"
[locale]="locale"
[monthFormat]="formatOptions.month"
(onSelection)="changeMonth($event)" >
<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months [date]="viewDate" [locale]="locale"
[monthFormat]="formatOptions.month" (onSelection)="changeMonth($event)">
</igx-months-view>

<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
[date]="viewDate"
[locale]="locale"
[yearFormat]="formatOptions.year"
(onSelection)="changeYear($event)">
</igx-years-view>
<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade [date]="viewDate" [locale]="locale"
[yearFormat]="formatOptions.year" (onSelection)="changeYear($event)">
</igx-years-view>
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
@Input()
public id = `igx-calendar-${NEXT_ID++}`;

@Input()
public hasHeader = true;

/**
* Gets whether the `day`, `month` and `year` should be rendered
* according to the locale and formatOptions, if any.
Expand Down Expand Up @@ -146,19 +149,19 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
/**
* @hidden
*/
@ViewChild('decade', {read: IgxYearsViewComponent})
@ViewChild('decade', { read: IgxYearsViewComponent })
public dacadeView: IgxYearsViewComponent;

/**
* @hidden
*/
@ViewChild('months', {read: IgxMonthsViewComponent})
@ViewChild('months', { read: IgxMonthsViewComponent })
public monthsView: IgxMonthsViewComponent;

/**
* @hidden
*/
@ViewChild('days', {read: IgxDaysViewComponent})
@ViewChild('days', { read: IgxDaysViewComponent })
public daysView: IgxDaysViewComponent;

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1014,10 +1014,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
setTimeout(() => {
date.nativeElement.focus();
}, parseInt(slideInRight.options.params.duration, 10));
} else if (this.callback) {
setTimeout(() => {
this.callback(this.dates, this._nextDate);
}, parseInt(slideInRight.options.params.duration, 10));
} else if (this.callback && (event.toState === 'next' || event.toState === 'prev')) {
this.callback(this.dates, this._nextDate);
}
}
}
Expand All @@ -1028,6 +1026,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
@HostListener('keydown.arrowup', ['$event'])
public onKeydownArrowUp(event: KeyboardEvent) {
event.preventDefault();
event.stopPropagation();

this.focusPreviousUpDate(event.target);
}

Expand All @@ -1037,6 +1037,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
@HostListener('keydown.arrowdown', ['$event'])
public onKeydownArrowDown(event: KeyboardEvent) {
event.preventDefault();
event.stopPropagation();

this.focusNextDownDate(event.target);
}

Expand All @@ -1055,6 +1057,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
@HostListener('keydown.arrowright', ['$event'])
public onKeydownArrowRight(event: KeyboardEvent) {
event.preventDefault();
event.stopPropagation();

this.focusNextDate(event.target);
}

Expand All @@ -1064,6 +1068,7 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
@HostListener('keydown.home', ['$event'])
public onKeydownHome(event: KeyboardEvent) {
event.preventDefault();
event.stopPropagation();

const dates = this.dates.filter(d => d.isCurrentMonth);
for (let i = 0; i < dates.length; i++) {
Expand All @@ -1080,6 +1085,7 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
@HostListener('keydown.end', ['$event'])
public onKeydownEnd(event: KeyboardEvent) {
event.preventDefault();
event.stopPropagation();

const dates = this.dates.filter(d => d.isCurrentMonth);
for (let i = dates.length - 1; i >= 0; i--) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="igx-calendar__body">
<div class="igx-calendar__body-row--wrap">
<div [igxCalendarMonth]="month" [date]="date" (onMonthSelection)="selectMonth($event)" [index]="i" *ngFor="let month of months; index as i;">
<div [igxCalendarMonth]="month" [date]="date" (onMonthSelection)="selectMonth($event)" [index]="i" *ngFor="let month of months; index as i; trackBy: monthTracker">
{{ formattedMonth(month) | titlecase }}
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,14 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
}
}

/**
* @hidden
*/
public monthTracker(index, item): string {
return `${item.getMonth()}}`;
}


/**
*@hidden
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="igx-calendar__body">
<div class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)">
<span [igxCalendarYear]="year" [date]="date" (onYearSelection)="selectYear($event)" *ngFor="let year of decade">
<span [igxCalendarYear]="year" [date]="date" (onYearSelection)="selectYear($event)" *ngFor="let year of decade; trackBy: yearTracker">
{{ formattedYear(year) }}
</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,13 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
this._onTouchedCallback = fn;
}

/**
* @hidden
*/
public yearTracker(index, item): string {
return `${item.getFullYear()}}`;
}

/**
* @hidden
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,17 @@
$this: bem--selector-to-string(&);
@include register-component(str-slice($this, 2, -1));

.igx-dialog__window {
@extend %date-picker-display !optional;
@extend %date-picker !optional;

@include e(buttons) {
@extend %date-picker__buttons !optional;
}

@include m(vertical) {
.igx-dialog__window {
@extend %date-picker-display--vertical !optional;
}
@extend %date-picker--vertical !optional;
}

@include m(dropdown) {
@extend %date-picker--dropdown !optional;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,116 @@
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Date Picker
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
@function igx-date-picker-theme(
$palette: $default-palette,
$schema: $light-schema
) {
$name: 'igx-date-picker';
$theme: apply-palette(map-get($schema, $name), $palette);
@return extend($theme, (name: $name, palette: $palette));
}

/// @param {Map} $theme - The theme used to style the component.
/// @param {Map} $theme - The calendar theme used to style the component.
/// @requires $elevations
/// @requires igx-elevation
/// @requires rem
@mixin igx-date-picker($theme) {
%date-picker-display {
width: 340px;
%date-picker {
min-width: 200px;
max-width: 340px;
box-shadow: igx-elevation($elevations, 24);
border-radius: rem(4px);
background: --var($theme, 'content-background');
overflow: hidden;

%cal-display {
background: --var($theme, 'content-background');
}

%cal-header-display {
background-color: --var($theme, 'header-background');
color: --var($theme, 'header-text-color');
}

%cal-picker-arrow {
color: --var($theme, 'picker-arrow-color');

&:hover {
color: --var($theme, 'picker-arrow-hover-color');
}
}

%cal-picker-date {
color: --var($theme, 'picker-text-color');

&:hover,
&:focus {
color: --var($theme, 'picker-text-hover-color');
}
}

%cal-value {
color: --var($theme, 'content-text-color');
}

%cal-value--label {
color: --var($theme, 'inactive-text-color');
}

%cal-value--weekend {
color: --var($theme, 'weekend-text-color');
}

%cal-value--special {
color: --var($theme, 'date-special-text-color');
background: --var($theme, 'date-special-background');
}

%cal-value--disabled {
color: --var($theme, 'date-disabled-text-color');
}

%cal-value--year-current {
color: --var($theme, 'year-current-text-color');
}

%cal-value--year-hover {
color: --var($theme, 'year-hover-text-color');
}

%cal-value--month-hover {
color: --var($theme, 'month-hover-text-color');
}

%cal-value--month-current {
color: --var($theme, 'month-current-text-color');
}

%cal-value--inactive {
color: --var($theme, 'inactive-text-color');
}

%cal-value--selected {
color: --var($theme, 'date-selected-text-color');
background-color: --var($theme, 'date-selected-background') !important;
}

%cal-value--current {
color: --var($theme, 'date-current-text-color');
}

%cal-value--hover {
background-color: --var($theme, 'date-hover-background');
}
}

%date-picker-display--vertical {
width: 540px;
%date-picker--vertical {
min-width: 368px; /* 168px for header + 200px for the content */
max-width: 540px;
}

%date-picker--dropdown {
display: flex;
flex: 1 0 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: igx-elevation($elevations, 3);
}
}

%date-picker__buttons {
display: flex;
justify-content: flex-end;
padding: rem(8px);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@
}

@if not(index($exclude, 'igx-date-picker')) {
@include igx-date-picker(igx-date-picker-theme($palette, $schema));
@include igx-date-picker(igx-calendar-theme($palette, $schema));
}

@if not(index($exclude, 'igx-dialog')) {
Expand Down
Loading

0 comments on commit a311c0c

Please sign in to comment.