Skip to content

Commit

Permalink
feat(date-picker): Fixes in editable date-picker #3034
Browse files Browse the repository at this point in the history
  • Loading branch information
@sboykova
sboykova committed Dec 5, 2018
1 parent 59caea3 commit 2859891
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 101 deletions.
44 changes: 20 additions & 24 deletions projects/igniteui-angular/src/lib/date-picker/date-picker.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,38 @@
<ng-template #readOnlyDatePickerTemplate>
<ng-template #defaultDatePickerTemplate>
<igx-input-group (click)="openCalendar()">
<igx-prefix>
<igx-icon>today</igx-icon>
</igx-prefix>
<label *ngIf="labelVisibility" igxLabel>{{label}}</label>
<input #readonlyInput class="igx-date-picker__input-date" igxInput [value]="displayData" [disabled]="disabled"
readonly />
</igx-input-group>
</ng-template>
<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
<igx-input-group (click)="openCalendar()">
<igx-prefix>
<igx-icon>today</igx-icon>
</igx-prefix>
<label *ngIf="labelVisibility" igxLabel>{{label}}</label>
<input #readonlyInput class="igx-date-picker__input-date" igxInput [value]="displayData" [disabled]="disabled"
readonly />
</igx-input-group>
</ng-template>

<ng-template #editableDatePickerTemplate>
<igx-input-group>
<igx-input-group #editableInputGroup>
<igx-prefix (click)="openCalendar()">
<igx-icon>today</igx-icon>
</igx-prefix>
<label *ngIf="labelVisibility" igxLabel>{{label}}</label>
<input #editableInput class="igx-date-picker__input-date" igxInput type="text" [value]="displayData" (blur)="handleInput($event)"
(onclick)="closeCalendar()" [igxFocus]="true" />
(onclick)="closeCalendar()" />
<igx-suffix *ngIf="displayData !== ''" (click)="clear()">
<igx-icon>clear</igx-icon>
</igx-suffix>
<igx-suffix (click)="openCalendar()">
<igx-icon>today</igx-icon>
</igx-suffix>
</igx-input-group>
</ng-template>

<div #calendarContainer class="igx-date-picker"
[ngClass]="{
<ng-container *ngTemplateOutlet="template; context: context"></ng-container>

<div #calendarContainer class="igx-date-picker" [ngClass]="{
'igx-date-picker--dropdown': mode === 'editable',
'igx-date-picker--vertical': vertical && mode !== 'editable'
}">
<igx-calendar #calendar *ngIf="isCalendarVisible" [hasHeader]="hasHeader" [formatOptions]="formatOptions"
[formatViews]="formatViews" [locale]="locale" [vertical]="vertical && mode !== 'editable'" [weekStart]="weekStart" (onSelection)="handleSelection($event)"></igx-calendar>
<igx-calendar #calendar [hasHeader]="hasHeader" [formatOptions]="formatOptions" [formatViews]="formatViews"
[locale]="locale" [vertical]="vertical && mode !== 'editable'" [weekStart]="weekStart" (onSelection)="handleSelection($event)"></igx-calendar>

<div class="igx-date-picker__buttons" *ngIf=" mode==='readonly' && isCalendarVisible &&
<div class="igx-date-picker__buttons" *ngIf=" mode==='readonly' &&
(cancelButtonLabel || todayButtonLabel)">
<button *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
{{ cancelButtonLabel }}
Expand All @@ -43,6 +41,4 @@
{{ todayButtonLabel }}
</button>
</div>
</div>

<ng-container *ngTemplateOutlet="datePickerTemplate"></ng-container>
</div>
113 changes: 38 additions & 75 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 @@ -44,7 +44,6 @@ import { DateRangeDescriptor } from '../core/dates/dateRange';
import { EditorProvider } from '../core/edit-provider';
import { IgxButtonModule } from '../directives/button/button.directive';
import { IgxRippleModule } from '../directives/ripple/ripple.directive';
import { IgxFocusModule } from '../directives/focus/focus.directive';

@Directive({
selector: '[igxDatePickerTemplate]'
Expand Down Expand Up @@ -248,17 +247,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
if (this.datePickerTemplateDirective) {
return this.datePickerTemplateDirective.template;
}
return this.defaultDatePickerTemplate;
}

/**
* Gets the input group template.
* ```typescript
* let template = this.template();
* ```
* @memberof IgxTimePickerComponent
*/
get datePickerTemplate(): TemplateRef<any> {
return (this.mode === InteractionMode.READONLY) ? this.readOnlyDatePickerTemplate : this.editableDatePickerTemplate;
}

Expand Down Expand Up @@ -428,12 +416,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
@Output()
public onSelection = new EventEmitter<Date>();

/**
* @hidden
*/
@ViewChild('defaultDatePickerTemplate', { read: TemplateRef })
protected defaultDatePickerTemplate: TemplateRef<any>;

/*
* @hidden
*/
Expand All @@ -452,6 +434,9 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
@ContentChild(IgxDatePickerTemplateDirective, { read: IgxDatePickerTemplateDirective })
protected datePickerTemplateDirective: IgxDatePickerTemplateDirective;

@ViewChild('editableInputGroup', { read: ElementRef })
protected editableInputGroup: ElementRef;

@ViewChild('editableInput', { read: ElementRef })
protected editableInput: ElementRef;

Expand Down Expand Up @@ -520,17 +505,15 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
};

private _disabledDates: DateRangeDescriptor[] = null;

private _specialDates: DateRangeDescriptor[] = null;

private _positionSettings: PositionSettings;
private _dropDownOverlaySettings: OverlaySettings;
private _modalOverlaySettings: OverlaySettings;
private _collapsed = true;

public inputDate = '';
public isCalendarVisible = false;
public hasHeader = true;
public collapsed = true;

/**
*Method that sets the selected date.
Expand Down Expand Up @@ -568,9 +551,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
*@hidden
*/
public ngOnInit(): void {
// this.alert.onOpen.pipe(takeUntil(this.destroy$)).subscribe((ev) => this._focusCalendarDate());
// this.alert.toggleRef.onClosed.pipe(takeUntil(this.destroy$)).subscribe((ev) => this.handleDialogCloseAction());

this._positionSettings = {
horizontalDirection: HorizontalAlignment.Right,
verticalDirection: VerticalAlignment.Bottom,
Expand Down Expand Up @@ -600,13 +580,16 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
takeUntil(this._destroy$)).subscribe(() => {
this.onClosed();
});

if (this.calendarContainer) {
this.calendarContainer.nativeElement.style.display = 'none';
}
}

/**
*@hidden
*/
public ngOnDestroy(): void {
this.overlayService.hide(this._componentID);
this._destroy$.next(true);
this._destroy$.complete();
}
Expand Down Expand Up @@ -668,7 +651,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
* @hidden
*/
public openCalendar(): void {
this.isCalendarVisible = true;
switch (this.mode) {
case InteractionMode.READONLY: {
this.hasHeader = true;
Expand All @@ -679,8 +661,8 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
break;
}
case InteractionMode.EDITABLE: {
if (this._collapsed) {
this._dropDownOverlaySettings.positionStrategy.settings.target = this.editableInput.nativeElement;
if (this.collapsed) {
this._dropDownOverlaySettings.positionStrategy.settings.target = this.editableInputGroup.nativeElement;
this.hasHeader = false;
requestAnimationFrame(() => {
this._componentID = this.overlayService.show(this.calendarContainer, this._dropDownOverlaySettings);
Expand All @@ -702,7 +684,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
}

public calculateDate(data: string) {
// debugger;
const isValid = this.isDateValid(data);
if (isValid) {
this.value = new Date(data);
Expand All @@ -712,24 +693,9 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
}

private isDateValid(data) {
const isValid = (new Date(data).toLocaleString(this.locale) !== 'Invalid Date');
// debugger;
return isValid;
return (new Date(data).toLocaleString(this.locale) !== 'Invalid Date');
}

/**
* Closes the dialog, after was clearing all calendar items from dom.
*
* @hidden
*/
// public handleDialogCloseAction() {
// this.onClose.emit(this);
// this.calendarRef.destroy();
// if (this.input) {
// this.input.nativeElement.focus();
// }
// }

/**
* Evaluates when @calendar.onSelection event was fired
* and update the input value.
Expand All @@ -756,52 +722,45 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
}

public handleInput(eventArgs) {
// debugger;
this.calculateDate(eventArgs.target.value);
}

@HostListener('keydown.alt.arrowdown', ['$event'])
public onAltArrowDownKeydown(event: KeyboardEvent) {
// debugger;
event.preventDefault();
event.stopPropagation();
this.calculateDate(this.editableInput.nativeElement.value);
this.openCalendar();
}

@HostListener('keydown.alt.arrowup', ['$event'])
public onAltArrowUpKeydown(event: KeyboardEvent) {
console.log('onAltArrowUpKeydown');
event.preventDefault();
event.stopPropagation();
this.closeCalendar();
}
// @HostListener('keydown.esc', ['$event'])
// public onEscKeydown(event) {
// this.closeCalendar();
// event.preventDefault();
// event.stopPropagation();
// }

@HostListener('keydown.esc', ['$event'])
public onEscKeydown(event) {
console.log('onEscKeydown');
@HostListener('keydown.spacebar', ['$event'])
@HostListener('keydown.space', ['$event'])
public onSpaceClick(event) {
this.openCalendar();
event.preventDefault();
event.stopPropagation();
this.closeCalendar();
}




public onKeyDown() {
debugger;
@HostListener('keydown.arrowdown', ['$event'])
public onArrowDownKeydown(event) {
event.preventDefault();
const cursor = this._getCursorPosition();
}

@HostListener('keydown.spacebar', ['$event'])
@HostListener('keydown.space', ['$event'])
public onSpaceClick(event) {
this.openCalendar();
@HostListener('keydown.arrowup', ['$event'])
public onArrowUpKeydown(event) {
event.preventDefault();
const cursor = this._getCursorPosition();
}

private onOpened() {
// debugger;
this._collapsed = false;
this.collapsed = false;
this.calendarContainer.nativeElement.style.display = 'block';

if (this.value) {
this.calendar.value = this.value;
Expand All @@ -817,9 +776,9 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
}

private onClosed() {
debugger;
this.isCalendarVisible = false;
this._collapsed = true;
// debugger;
this.collapsed = true;
this.calendarContainer.nativeElement.style.display = 'none';
this.onClose.emit(this);

if (this.editableInput) {
Expand All @@ -838,6 +797,10 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
return value.toLocaleDateString(locale);
}

private _getCursorPosition(): number {
return this.editableInput.nativeElement.selectionStart;
}

/**
* Apply custom user formatter upon date.
* @param formatter custom formatter function.
Expand All @@ -862,6 +825,6 @@ class Constants {
@NgModule({
declarations: [IgxDatePickerComponent, IgxDatePickerTemplateDirective],
exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective],
imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule, IgxFocusModule]
imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule]
})
export class IgxDatePickerModule { }
4 changes: 2 additions & 2 deletions src/app/date-picker/date-picker.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ <h4 class="sample-title">Date Picker with retemplated input group.</h4>
<p class="sample-description">Detailed description to be added.</p>
<div class="preview">
<igx-datePicker [value]="date" [vertical]="true" [formatter]="formatter">
<ng-template igxDatePickerTemplate let-openDialog="openCalendar" let-value="value" let-displayData="displayData">
<ng-template igxDatePickerTemplate let-openCalendar="openCalendar" let-value="value"
let-displayData="displayData">
<igx-input-group (click)="openCalendar()">
<label igxLabel>Date</label>
<input class="igx-date-picker__input-date" igxInput [value]="displayData" />
</igx-input-group>
<label>{{value}}</label>
</ng-template>
</igx-datePicker>
</div>
Expand Down

0 comments on commit 2859891

Please sign in to comment.