From 2859891b730b3b7abaec2f9ad3bcd5de41ef2828 Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Wed, 5 Dec 2018 18:56:59 +0200 Subject: [PATCH] feat(date-picker): Fixes in editable date-picker #3034 --- .../date-picker/date-picker.component.html | 44 ++++--- .../lib/date-picker/date-picker.component.ts | 113 ++++++------------ src/app/date-picker/date-picker.sample.html | 4 +- 3 files changed, 60 insertions(+), 101 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html index da0aeed72a6..56954396122 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html @@ -1,40 +1,38 @@ - - - - today - - - - - - + + + today + + + + - + + + today + + (onclick)="closeCalendar()" /> clear - - today - -
+ +
- + -
-
- - +
\ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index 0e050f2600a..9daa3490f29 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -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]' @@ -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 { return (this.mode === InteractionMode.READONLY) ? this.readOnlyDatePickerTemplate : this.editableDatePickerTemplate; } @@ -428,12 +416,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi @Output() public onSelection = new EventEmitter(); - /** - * @hidden - */ - @ViewChild('defaultDatePickerTemplate', { read: TemplateRef }) - protected defaultDatePickerTemplate: TemplateRef; - /* * @hidden */ @@ -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; @@ -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. @@ -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, @@ -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(); } @@ -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; @@ -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); @@ -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); @@ -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. @@ -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; @@ -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) { @@ -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. @@ -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 { } diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html index d2659056a90..104f898fd2c 100644 --- a/src/app/date-picker/date-picker.sample.html +++ b/src/app/date-picker/date-picker.sample.html @@ -36,12 +36,12 @@

Date Picker with retemplated input group.

Detailed description to be added.

- + -