Skip to content

Commit

Permalink
feat(date-picker): Spinning issues fixes #3034
Browse files Browse the repository at this point in the history
  • Loading branch information
@sboykova
sboykova committed Jan 10, 2019
1 parent fc248af commit e24418d
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 46 deletions.
91 changes: 53 additions & 38 deletions projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import {
Directive,
Inject,
NgZone,
AfterViewInit
AfterViewInit,
HostListener
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import {
Expand Down Expand Up @@ -320,6 +321,24 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
openCalendar: (eventArgs) => { this.openCalendar(eventArgs); }
};
}

/**
*An @Input property that sets the selected date.
*```typescript
*public date: Date = new Date();
*```
*```html
*<igx-date-picker [value]="date"></igx-date-picker>
*```
*/
@Input()
public get value(): Date {
return this._value;
}

public set value(date: Date) {
this._value = date;
}
/**
*An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
*```html
Expand Down Expand Up @@ -358,24 +377,6 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
@Input()
public disabled: boolean;

/**
*An @Input property that sets the selected date.
*```typescript
*public date: Date = new Date();
*```
*```html
*<igx-date-picker [value]="date"></igx-date-picker>
*```
*/
@Input()
public get value(): Date {
return this._value;
}

public set value(date: Date) {
this._value = date;
}

/**
* An @Input property that sets the `IgxDatePickerComponent` label.
* The default label is 'Date'.
Expand Down Expand Up @@ -585,6 +586,26 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
private _value;
private DEFAULT_DATE_FORMAT = PREDEFINED_FORMAT_OPTIONS.SHORT_DATE;

// @HostListener('keydown.esc', ['$event'])
// public onEscKeydown(event) {
// this.closeCalendar();
// event.preventDefault();
// event.stopPropagation();
// }

// @HostListener('keydown.spacebar', ['$event'])
// @HostListener('keydown.space', ['$event'])
// public onSpaceClick(event) {
// this.openCalendar();
// event.preventDefault();
// }


@HostListener('keyup', ['$event'])
public test(event) {
// debugger;
}

/**
*Method that sets the selected date.
*```typescript
Expand Down Expand Up @@ -674,12 +695,12 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
this.onKeydown(res);
});

fromEvent(this.getEditElement(), 'mousewheel').pipe(
throttle(() => interval(0, animationFrameScheduler)),
takeUntil(this._destroy$))
.subscribe((res) => {
this.onMouseWheel(res);
});
// fromEvent(this.getEditElement(), 'mousewheel').pipe(
// throttle(() => interval(0, animationFrameScheduler)),
// takeUntil(this._destroy$))
// .subscribe((res) => {
// this.onMouseWheel(res);
// });
});
}
}
Expand Down Expand Up @@ -851,29 +872,20 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
this.calculateDate(eventArgs.target.value);
}

// @HostListener('keydown.esc', ['$event'])
// public onEscKeydown(event) {
// this.closeCalendar();
// event.preventDefault();
// event.stopPropagation();
// }

// @HostListener('keydown.spacebar', ['$event'])
// @HostListener('keydown.space', ['$event'])
// public onSpaceClick(event) {
// this.openCalendar();
// event.preventDefault();
// }

private onKeydown(event) {
console.log('onKeydown 1 ');
event.preventDefault();
event.stopPropagation();
const cursorPos = this._getCursorPosition();
const inputValue = event.target.value;

console.log('repeat ' + event.repeat);
switch (event.key) {
case KEYS.UP_ARROW:
case KEYS.UP_ARROW_IE:
this.editableInput.nativeElement.value = DatePickerUtil.getSpinnedDateInput(this.dateFormatParts, inputValue, cursorPos, 1);
console.log('onKeydown 2 ');
break;
case KEYS.DOWN_ARROW:
case KEYS.DOWN_ARROW_IE:
Expand All @@ -892,7 +904,10 @@ export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAc
this._setCursorPosition(cursorPos);
requestAnimationFrame(() => {
this._setCursorPosition(cursorPos);
console.log('onKeydown 4');
});

console.log('onKeydown 3');
}

private onMouseWheel(event) {
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export enum DATE_PARTS {
WEEKDAY = 'weekday'
}

export abstract class DatePickerUtil {
export class DatePickerUtil {
public static MAX_MONTH_SYMBOLS = 9;
public static MAX_WEEKDAY_SYMBOLS = 9;
public static SEPARATOR = 'separator';
Expand Down
27 changes: 22 additions & 5 deletions src/app/date-picker/date-picker.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,31 @@ <h4 class="sample-title">Default Date Picker.</h4>
</article>

<article class="datepicker-column">
<h4 class="sample-title">Editable Date Picker</h4>
<h4 class="sample-title">Editable Date Picker bind with ngModel</h4>
<label>Date: {{ editableDatePicker.value }}</label>
<label>Format: {{ editableDatePicker.format }}</label>
<div class="preview" style="width: 500px">
<igx-date-picker #editableDatePicker [vertical]="true" mode="editable" [weekStart]="1" [value]="date1"
format="fullDate">
<igx-date-picker #editableDatePicker [vertical]="true" mode="editable" [weekStart]="1" [(ngModel)]="date1">
</igx-date-picker>
</div>
</article>

<article class="datepicker-column">
<h4 class="sample-title">Editable Date Picker</h4>
<label>Date: {{ editableDatePicker1.value }}</label>
<label>Format: {{ editableDatePicker1.format }}</label>
<div class="preview" style="width: 500px">
<igx-date-picker #editableDatePicker1 mode="editable" [value]="date1" format="longDate"></igx-date-picker>
</div>
</article>

<article class="datepicker-column">
<h4 class="sample-title">Date Picker with passed date.</h4>
<p class="sample-description">Detailed description to be added.</p>
<div class="preview">
<igx-date-picker [value]="date"></igx-date-picker>
</div>
</article> -->
</article>
<article class="datepicker-column">
<h4 class="sample-title">Date Picker with passed date and custom formatter.</h4>
<p class="sample-description">Detailed description to be added.</p>
Expand All @@ -35,6 +44,14 @@ <h4 class="sample-title">Date Picker with passed date and custom formatter.</h4>
</div>
</article>
<article class="datepicker-column">
<h4 class="sample-title">Vertical Date Picker</h4>
<p class="sample-description">Detailed description to be added.</p>
<div class="preview">
<igx-date-picker [vertical]="true"></igx-date-picker>
</div>
</article>

<!-- <article class="datepicker-column">
<h4 class="sample-title">Date Picker with retemplated input group.</h4>
<p class="sample-description">Detailed description to be added.</p>
<div class="preview">
Expand All @@ -48,6 +65,6 @@ <h4 class="sample-title">Date Picker with retemplated input group.</h4>
</ng-template>
</igx-date-picker>
</div>
</article>
</article> -->
</section>
</div>
28 changes: 26 additions & 2 deletions src/app/date-picker/date-picker.sample.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, ViewChild } from '@angular/core';
import { Component, ViewChild, PipeTransform, Pipe } from '@angular/core';
import { IgxDatePickerComponent } from 'igniteui-angular';
import { DatePipe } from '@angular/common';

@Component({
selector: 'app-date-picker-sample',
Expand All @@ -11,7 +12,7 @@ export class DatePickerSampleComponent {
@ViewChild('datePicker') datePicker: IgxDatePickerComponent;
date = new Date('10/3/2018');

date1 = new Date();
public date1;

formatter = (_: Date) => {
return _.toDateString();
Expand All @@ -20,4 +21,27 @@ export class DatePickerSampleComponent {
public deselect() {
this.datePicker.deselectDate();
}

constructor() {
const date = new Date();
date.setDate(10);
date.setMonth(2);
date.setFullYear(2018);

this.date1 = date;

// this.date1.setDate(10);
// this.date1.setMonth(2);
// this.date1.setFullYear(2018);

const test = new DateFormatPipe('en').transform(date, 'd.M.y');
}
}
@Pipe({
name: 'format'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {
transform(value: any, args?: any): any {
return super.transform(value, args);
}
}

0 comments on commit e24418d

Please sign in to comment.