From a41e57464fcab867d2aea066bae70eee6ee43c94 Mon Sep 17 00:00:00 2001 From: Svetla Boykova Date: Tue, 8 Jan 2019 11:58:04 +0200 Subject: [PATCH] feat(date-picker): Added spinning functionality and other fixes #3034 --- .../src/lib/date-picker/date-picker.common.ts | 11 ++ .../lib/date-picker/date-picker.component.ts | 180 ++++++++++-------- .../src/lib/date-picker/date-picker.pipes.ts | 45 ++--- .../src/lib/date-picker/date-picker.utils.ts | 145 +++++++------- 4 files changed, 199 insertions(+), 182 deletions(-) diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.common.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.common.ts index e69de29bb2d..fd8c6dffefe 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.common.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.common.ts @@ -0,0 +1,11 @@ +/** @hidden */ +export const IGX_DATE_PICKER_COMPONENT = 'IgxDatePickerComponentToken'; + +/** @hidden */ +export interface IgxDatePickerBase { + value: Date; + format: string; + mask: string; + rawData: string; + dateFormatParts: any[]; +} 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 eff01000982..e927b100014 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 @@ -1,4 +1,4 @@ -import { CommonModule, DatePipe } from '@angular/common'; +import { CommonModule } from '@angular/common'; import { Component, ContentChild, @@ -11,13 +11,12 @@ import { Output, ViewChild, ViewContainerRef, - HostListener, ElementRef, TemplateRef, Directive, Inject, - Pipe, - PipeTransform + NgZone, + AfterViewInit } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { @@ -29,8 +28,8 @@ import { } from '../calendar/index'; import { IgxIconModule } from '../icon/index'; import { IgxInputGroupModule } from '../input-group/index'; -import { Subject } from 'rxjs'; -import { filter, takeUntil } from 'rxjs/operators'; +import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs'; +import { filter, takeUntil, throttle } from 'rxjs/operators'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings, @@ -55,6 +54,8 @@ import { DATE_PARTS } from './date-picker.utils'; import { DisplayValuePipe, InputValuePipe, DateFormatPipe } from './date-picker.pipes'; +import { IgxDatePickerBase } from './date-picker.common'; +import { KEYS } from '../core/utils'; @Directive({ selector: '[igxDatePickerTemplate]' @@ -103,7 +104,7 @@ export enum DatePickerInteractionMode { }) @DeprecateClass('\'igx-datePicker\' selector is deprecated. Use \'igx-date-picker\' selector instead.') -export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvider, OnInit, OnDestroy { +export class IgxDatePickerComponent implements IgxDatePickerBase, ControlValueAccessor, EditorProvider, OnInit, OnDestroy, AfterViewInit { /** *Returns the format options of the `IgxDatePickerComponent`. *```typescript @@ -289,16 +290,12 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi */ public get transformedDate() { if (this._value) { - return this.transformDate(this._value); + return this._transformDate(this._value); } return ''; } - public set transformedDate(value: string) { - this._transformedDate = value; - } - - constructor(@Inject(IgxOverlayService) private overlayService: IgxOverlayService) { } + constructor(@Inject(IgxOverlayService) private _overlayService: IgxOverlayService, private _zone: NgZone) { } /** * Gets the input group template. @@ -378,22 +375,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi } public set value(date: Date) { - switch (this.mode) { - case DatePickerInteractionMode.EDITABLE: { - if (date !== null) { - this._value = date; - this._transformedDate = this.transformDate(date); - } else { - this._value = null; - this._transformedDate = ''; - } - break; - } - case DatePickerInteractionMode.READONLY: { - this._value = date; - break; - } - } + this._value = date; } /** @@ -519,47 +501,56 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi @ViewChild('editableDatePickerTemplate', { read: TemplateRef }) protected editableDatePickerTemplate: TemplateRef; - /** - *@hidden + /* + * @hidden */ - @ContentChild(IgxDatePickerTemplateDirective, { read: IgxDatePickerTemplateDirective }) - protected datePickerTemplateDirective: IgxDatePickerTemplateDirective; - @ViewChild('editableInputGroup', { read: ElementRef }) protected editableInputGroup: ElementRef; + /* + * @hidden + */ @ViewChild('editableInput', { read: ElementRef }) protected editableInput: ElementRef; + /* + * @hidden + */ @ViewChild('readonlyInput', { read: ElementRef }) protected readonlyInput: ElementRef; @ViewChild('calendar') public calendar: IgxCalendarComponent; + /** + *@hidden + */ + @ViewChild('container', { read: ViewContainerRef }) + public container: ViewContainerRef; + /** *@hidden */ - @ContentChild(IgxCalendarHeaderTemplateDirective, { read: IgxCalendarHeaderTemplateDirective }) + @ViewChild('calendarContainer') + public calendarContainer: ElementRef; - public headerTemplate: IgxCalendarHeaderTemplateDirective; /** *@hidden */ - @ContentChild(IgxCalendarSubheaderTemplateDirective, { read: IgxCalendarSubheaderTemplateDirective }) - public subheaderTemplate: IgxCalendarSubheaderTemplateDirective; + @ContentChild(IgxDatePickerTemplateDirective, { read: IgxDatePickerTemplateDirective }) + protected datePickerTemplateDirective: IgxDatePickerTemplateDirective; /** *@hidden */ - @ViewChild('container', { read: ViewContainerRef }) - public container: ViewContainerRef; + @ContentChild(IgxCalendarHeaderTemplateDirective, { read: IgxCalendarHeaderTemplateDirective }) + public headerTemplate: IgxCalendarHeaderTemplateDirective; /** *@hidden */ - @ViewChild('calendarContainer') - public calendarContainer: ElementRef; + @ContentChild(IgxCalendarSubheaderTemplateDirective, { read: IgxCalendarSubheaderTemplateDirective }) + public subheaderTemplate: IgxCalendarSubheaderTemplateDirective; public hasHeader = true; public collapsed = true; @@ -594,7 +585,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi private _format; private _value; - private _transformedDate; private DEFAULT_DATE_FORMAT = PREDEFINED_FORMAT_OPTIONS.SHORT_DATE; /** @@ -651,16 +641,16 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi outlet: this.outlet }; - this.overlayService.onOpened.pipe( + this._overlayService.onOpened.pipe( filter(overlay => overlay.id === this._componentID), takeUntil(this._destroy$)).subscribe(() => { - this.onOpened(); + this._onOpened(); }); - this.overlayService.onClosed.pipe( + this._overlayService.onClosed.pipe( filter(overlay => overlay.id === this._componentID), takeUntil(this._destroy$)).subscribe(() => { - this.onClosed(); + this._onClosed(); }); if (this.calendarContainer) { @@ -668,16 +658,39 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi } if (this.mode === DatePickerInteractionMode.EDITABLE) { - this.getFormatOptions(this.format); + this._getFormatOptions(this.format); this.dateFormatParts = DatePickerUtil.parseDateFormat(this.format); } } + /** + *@hidden + */ + public ngAfterViewInit(): void { + if (this.mode === DatePickerInteractionMode.EDITABLE) { + this._zone.runOutsideAngular(() => { + fromEvent(this.getEditElement(), 'keydown').pipe( + throttle(() => interval(0, animationFrameScheduler)), + takeUntil(this._destroy$)) + .subscribe((res) => { + this.onKeydown(res); + }); + + fromEvent(this.getEditElement(), 'mousewheel').pipe( + throttle(() => interval(0, animationFrameScheduler)), + takeUntil(this._destroy$)) + .subscribe((res) => { + this.onMouseWheel(res); + }); + }); + } + } + /** *@hidden */ public ngOnDestroy(): void { - this.overlayService.hideAll(); + this._overlayService.hideAll(); this._destroy$.next(true); this._destroy$.complete(); } @@ -744,14 +757,14 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi switch (this.mode) { case DatePickerInteractionMode.READONLY: { this.hasHeader = true; - this._componentID = this.overlayService.show(this.calendarContainer, this._modalOverlaySettings); + this._componentID = this._overlayService.show(this.calendarContainer, this._modalOverlaySettings); break; } case DatePickerInteractionMode.EDITABLE: { if (this.collapsed) { this._dropDownOverlaySettings.positionStrategy.settings.target = this.editableInputGroup.nativeElement; this.hasHeader = false; - this._componentID = this.overlayService.show(this.calendarContainer, this._dropDownOverlaySettings); + this._componentID = this._overlayService.show(this.calendarContainer, this._dropDownOverlaySettings); } break; } @@ -759,7 +772,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi } public closeCalendar() { - this.overlayService.hide(this._componentID); + this._overlayService.hide(this._componentID); } public clear() { @@ -787,6 +800,9 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi const yearStartIdx = yearPartPosition[0]; const yearEndIdx = yearStartIdx + yearPartPosition.length; + if (this.rawData === undefined) { + this.rawData = data; + } const day = DatePickerUtil.trimUnderlines(this.rawData.substring(dayStartIdx, dayEndIdx)); const month = DatePickerUtil.trimUnderlines(this.rawData.substring(monthStartIdx, monthEndIdx)); const year = this.rawData.substring(yearStartIdx, yearEndIdx); @@ -837,21 +853,11 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi this.calculateDate(eventArgs.target.value); } - public isOneDigit(char, index) { - return (this.format.match(new RegExp(char, 'g')).length === 1 && index < 10); - } - - @HostListener('keydown.alt.arrowdown', ['$event']) - public onAltArrowDownKeydown(event: KeyboardEvent) { - this.calculateDate(this.editableInput.nativeElement.value); - this.openCalendar(event); - } - // @HostListener('keydown.esc', ['$event']) // public onEscKeydown(event) { // this.closeCalendar(); - // event.preventDefault(); - // event.stopPropagation(); + // event.preventDefault(); + // event.stopPropagation(); // } // @HostListener('keydown.spacebar', ['$event']) @@ -861,33 +867,45 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi // event.preventDefault(); // } - @HostListener('keydown.arrowdown', ['$event']) - public onArrowDownKeydown(event) { - event.preventDefault(); + private onKeydown(event) { event.stopPropagation(); - const cursorPos = this._getCursorPosition(); const inputValue = event.target.value; - this.editableInput.nativeElement.value = DatePickerUtil.getSpinnedDateInput(this.dateFormatParts, inputValue, cursorPos, -1); + + switch (event.key) { + case KEYS.UP_ARROW: + case KEYS.UP_ARROW_IE: + this.editableInput.nativeElement.value = DatePickerUtil.getSpinnedDateInput(this.dateFormatParts, inputValue, cursorPos, 1); + break; + case KEYS.DOWN_ARROW: + case KEYS.DOWN_ARROW_IE: + if (event.altKey) { + this.calculateDate(this.editableInput.nativeElement.value); + this.openCalendar(event); + } else { + this.editableInput.nativeElement.value = + DatePickerUtil.getSpinnedDateInput(this.dateFormatParts, inputValue, cursorPos, -1); + } + break; + default: + return; + } + + this._setCursorPosition(cursorPos); requestAnimationFrame(() => { this._setCursorPosition(cursorPos); }); } - @HostListener('keydown.arrowup', ['$event']) - public onArrowUpKeydown(event) { - event.preventDefault(); + private onMouseWheel(event) { event.stopPropagation(); - const cursorPos = this._getCursorPosition(); const inputValue = event.target.value; - this.editableInput.nativeElement.value = DatePickerUtil.getSpinnedDateInput(this.dateFormatParts, inputValue, cursorPos, 1); - requestAnimationFrame(() => { - this._setCursorPosition(cursorPos); - }); + + // console.log('deltaX ' + event.deltaX + ' deltaY ' + event.deltaY + ' deltaMode ' + event.deltaMode); } - private onOpened() { + private _onOpened() { this.collapsed = false; this.calendarContainer.nativeElement.style.display = 'block'; @@ -904,7 +922,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi } } - private onClosed() { + private _onClosed() { this.collapsed = true; this.calendarContainer.nativeElement.style.display = 'none'; this.onClose.emit(this); @@ -933,7 +951,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi this.editableInput.nativeElement.setSelectionRange(start, end); } - private getFormatOptions(format) { + private _getFormatOptions(format) { switch (format) { case PREDEFINED_FORMAT_OPTIONS.SHORT_DATE: { this.mask = PREDEFINED_MASKS.SHORT_DATE_MASK; @@ -976,7 +994,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi private _onChangeCallback: (_: Date) => void = () => { }; - private transformDate(date) { + private _transformDate(date) { return new DateFormatPipe(Constants.DEFAULT_LOCALE_DATE).transform(date, this.format); } } diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.pipes.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.pipes.ts index 7d495030289..be02da03a5a 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.pipes.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.pipes.ts @@ -1,33 +1,29 @@ -import { PipeTransform, Pipe } from '@angular/core'; -import { IgxDatePickerComponent } from 'igniteui-angular'; +import { PipeTransform, Pipe, Inject } from '@angular/core'; import { DatePickerUtil, DATE_PARTS, FORMAT_DESC, DATE_CHARS } from './date-picker.utils'; import { DatePipe } from '@angular/common'; +import { IGX_DATE_PICKER_COMPONENT, IgxDatePickerBase } from './date-picker.common'; @Pipe({ name: 'format' }) - export class DateFormatPipe extends DatePipe implements PipeTransform { transform(value: any, args?: any): any { return super.transform(value, args); } } - @Pipe({ name: 'displayValue' }) export class DisplayValuePipe implements PipeTransform { - constructor(public datePicker: IgxDatePickerComponent) { } - // on blur + constructor(@Inject(IGX_DATE_PICKER_COMPONENT) private _datePicker: IgxDatePickerBase) { } transform(value: any, args?: any): any { if (value !== '') { - if (value === DatePickerUtil.trimMaskSymbols(this.datePicker.mask)) { + if (value === DatePickerUtil.trimMaskSymbols(this._datePicker.mask)) { return ''; } - this.datePicker.rawData = value; + this._datePicker.rawData = value; return DatePickerUtil.trimUnderlines(value); } - return ''; } } @@ -36,24 +32,23 @@ export class DisplayValuePipe implements PipeTransform { name: 'inputValue' }) export class InputValuePipe implements PipeTransform { - constructor(public datePicker: IgxDatePickerComponent) { } - // on focus + private PROMPT_CHAR = '_'; + constructor(@Inject(IGX_DATE_PICKER_COMPONENT) private _datePicker: IgxDatePickerBase) { } transform(value: any, args?: any): any { - if (this.datePicker.value !== null && this.datePicker.value !== undefined) { - let result; + if (this._datePicker.value !== null && this._datePicker.value !== undefined) { let offset = 0; const dateArray = Array.from(value); - const monthName = DatePickerUtil.getLongMonthName(this.datePicker.value); - const dayName = DatePickerUtil.getLongDayName(this.datePicker.value); - - const dateFormatParts = this.datePicker.dateFormatParts; + const monthName = DatePickerUtil.getLongMonthName(this._datePicker.value); + const dayName = DatePickerUtil.getLongDayName(this._datePicker.value); + const dateFormatParts = this._datePicker.dateFormatParts; + const datePickerFormat = this._datePicker.format; for (let i = 0; i < dateFormatParts.length; i++) { if (dateFormatParts[i].type === DATE_PARTS.WEEKDAY) { if (dateFormatParts[i].formatType === FORMAT_DESC.LONG) { offset += DatePickerUtil.MAX_WEEKDAY_SYMBOLS - 4; for (let j = dayName.length; j < DatePickerUtil.MAX_WEEKDAY_SYMBOLS; j++) { - dateArray.splice(j, 0, '_'); + dateArray.splice(j, 0, this.PROMPT_CHAR); } dateArray.join(''); } @@ -65,13 +60,14 @@ export class InputValuePipe implements PipeTransform { const endPos = startPos + DatePickerUtil.MAX_MONTH_SYMBOLS - monthName.length; offset += DatePickerUtil.MAX_MONTH_SYMBOLS - 4; for (let j = startPos; j < endPos; j++) { - dateArray.splice(j, 0, '_'); + dateArray.splice(j, 0, this.PROMPT_CHAR); } dateArray.join(''); } if (dateFormatParts[i].formatType === FORMAT_DESC.NUMERIC || dateFormatParts[i].formatType === FORMAT_DESC.TWO_DIGITS) { - const isOneDigit = this.datePicker.isOneDigit(DATE_CHARS.MONTH_CHAR, this.datePicker.value.getMonth() + 1); + const isOneDigit = + DatePickerUtil.isOneDigit(datePickerFormat, DATE_CHARS.MONTH_CHAR, this._datePicker.value.getMonth() + 1); if (isOneDigit) { const startPos = offset + dateFormatParts[i].initialPosition; dateArray.splice(startPos, 0, DatePickerUtil.getNumericFormatPrefix(dateFormatParts[i].formatType)); @@ -84,7 +80,8 @@ export class InputValuePipe implements PipeTransform { if (dateFormatParts[i].type === DATE_PARTS.DAY) { if (dateFormatParts[i].formatType === FORMAT_DESC.NUMERIC || dateFormatParts[i].formatType === FORMAT_DESC.TWO_DIGITS) { - const isOneDigit = this.datePicker.isOneDigit(DATE_CHARS.DAY_CHAR, this.datePicker.value.getDate()); + const isOneDigit = + DatePickerUtil.isOneDigit(datePickerFormat, DATE_CHARS.DAY_CHAR, this._datePicker.value.getDate()); if (isOneDigit) { const startPos = offset + dateFormatParts[i].initialPosition; dateArray.splice(startPos, 0, DatePickerUtil.getNumericFormatPrefix(dateFormatParts[i].formatType)); @@ -95,11 +92,9 @@ export class InputValuePipe implements PipeTransform { } } - result = dateArray.join(''); - - return result; + return dateArray.join(''); } - return DatePickerUtil.trimMaskSymbols(this.datePicker.mask); + return DatePickerUtil.trimMaskSymbols(this._datePicker.mask); } } diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts index 225c66ce26e..58a21b1854d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts @@ -202,80 +202,12 @@ export abstract class DatePickerUtil { return dateStruct; } - - private static fillDatePartsPositions(dateArray: any[]) { - let offset = 0; - - for (let i = 0; i < dateArray.length; i++) { - if (dateArray[i].type === DATE_PARTS.DAY) { - dateArray[i].position = DatePickerUtil.fillValues(offset, 2); - offset += 2; - } - - if (dateArray[i].type === DATE_PARTS.MONTH) { - switch (dateArray[i].formatType) { - case FORMAT_DESC.SHORT: { - dateArray[i].position = DatePickerUtil.fillValues(offset, 3); - offset += 3; - break; - } - case FORMAT_DESC.LONG: { - dateArray[i].position = DatePickerUtil.fillValues(offset, 9); - offset += 9; - break; - } - case FORMAT_DESC.NARROW: { - dateArray[i].position = DatePickerUtil.fillValues(offset, 1); - offset++; - break; - } - default: { - // FORMAT_DESC.NUMERIC || FORMAT_DESC.TWO_DIGITS - dateArray[i].position = DatePickerUtil.fillValues(offset, 2); - offset += 2; - break; - } - } - } - - if (dateArray[i].type === DatePickerUtil.SEPARATOR) { - dateArray[i].position = DatePickerUtil.fillValues(offset, 1); - offset++; - } - - if (dateArray[i].type === DATE_PARTS.YEAR) { - switch (dateArray[i].formatType) { - case FORMAT_DESC.NUMERIC: { - dateArray[i].position = DatePickerUtil.fillValues(offset, 4); - offset += 4; - break; - } - case FORMAT_DESC.TWO_DIGITS: { - dateArray[i].position = DatePickerUtil.fillValues(offset, 2); - offset += 2; - break; - } - } - } - } - } - - private static fillValues(start: number, offset: number) { - const array = []; - for (let i = start; i < start + offset; i++) { - array.push(i); - } - - return array; - } - public static isSpecialSymbol(char: string): boolean { return (char !== DATE_CHARS.YEAR_CHAR && char !== DATE_CHARS.MONTH_CHAR && char !== DATE_CHARS.DAY_CHAR && char !== DATE_CHARS.WEEKDAY_CHAR) ? false : true; } - public static getFormatMask(format: string): string { const mask = []; const dateStruct = DatePickerUtil.parseDateFormat(format); @@ -340,7 +272,6 @@ export abstract class DatePickerUtil { return mask.join(''); } - public static createDate(day: number, month: number, year: number): Date { const date = new Date(); date.setDate(day); @@ -348,31 +279,25 @@ export abstract class DatePickerUtil { date.setFullYear(year); return date; } - public static trimMaskSymbols(mask: string): string { return mask.replace(/0|L/g, '_'); } - public static trimUnderlines(value: string): string { return value.replace(/_/g, ''); } - public static getLongMonthName(value: Date): string { return value.toLocaleString('en', { month: 'long' }); } - public static getLongDayName(value: Date): string { return value.toLocaleString('en', { weekday: 'long' }); } - public static getNumericFormatPrefix(formatType: string): string { return (formatType === FORMAT_DESC.TWO_DIGITS) ? '0' : '_'; } - public static getSpinnedDateInput(dateFormatParts: any[], inputValue: string, position: number, delta: number): string { let datePart = DatePickerUtil.getDatePartOnPosition(dateFormatParts, position); if ((datePart && datePart.length > 0 && datePart[0].type === DatePickerUtil.SEPARATOR) @@ -431,8 +356,76 @@ export abstract class DatePickerUtil { return `${start}${changedPart}${end}`; } - + public static isOneDigit(input: string, char: string, index: number): boolean { + return input.match(new RegExp(char, 'g')).length === 1 && index < 10; + } + public static daysInMonth(date: Date): number { + return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); + } private static getDatePartOnPosition(dateFormatParts: any[], position: number) { return dateFormatParts.filter((element) => element.position.some(pos => pos === position)); } + private static fillDatePartsPositions(dateArray: any[]): void { + let offset = 0; + + for (let i = 0; i < dateArray.length; i++) { + if (dateArray[i].type === DATE_PARTS.DAY) { + dateArray[i].position = DatePickerUtil.fillValues(offset, 2); + offset += 2; + } + + if (dateArray[i].type === DATE_PARTS.MONTH) { + switch (dateArray[i].formatType) { + case FORMAT_DESC.SHORT: { + dateArray[i].position = DatePickerUtil.fillValues(offset, 3); + offset += 3; + break; + } + case FORMAT_DESC.LONG: { + dateArray[i].position = DatePickerUtil.fillValues(offset, 9); + offset += 9; + break; + } + case FORMAT_DESC.NARROW: { + dateArray[i].position = DatePickerUtil.fillValues(offset, 1); + offset++; + break; + } + default: { + // FORMAT_DESC.NUMERIC || FORMAT_DESC.TWO_DIGITS + dateArray[i].position = DatePickerUtil.fillValues(offset, 2); + offset += 2; + break; + } + } + } + + if (dateArray[i].type === DatePickerUtil.SEPARATOR) { + dateArray[i].position = DatePickerUtil.fillValues(offset, 1); + offset++; + } + + if (dateArray[i].type === DATE_PARTS.YEAR) { + switch (dateArray[i].formatType) { + case FORMAT_DESC.NUMERIC: { + dateArray[i].position = DatePickerUtil.fillValues(offset, 4); + offset += 4; + break; + } + case FORMAT_DESC.TWO_DIGITS: { + dateArray[i].position = DatePickerUtil.fillValues(offset, 2); + offset += 2; + break; + } + } + } + } + } + private static fillValues(start: number, offset: number) { + const array = []; + for (let i = start; i < start + offset; i++) { + array.push(i); + } + return array; + } }