From ad98d1b1f27bc595e54b87de1ce338d9f84e8fd4 Mon Sep 17 00:00:00 2001 From: Vlad Ioffe Date: Fri, 20 Oct 2017 16:40:11 +0300 Subject: [PATCH] resolves #250 - Documentation for max date Moment|String is wrong (#260) * resolves #250 - Documentation for max date Moment|String is wrong * fixing weekdays * fixing build --- src/app/common/models/calendar.model.ts | 10 ++++-- .../services/utils/utils.service.spec.ts | 7 ++++ .../common/services/utils/utils.service.ts | 22 ++++++++---- .../date-picker/date-picker-config.model.ts | 23 +++++++++---- src/app/date-picker/date-picker.component.ts | 5 ++- .../date-picker/date-picker.directive.spec.ts | 2 +- src/app/date-picker/date-picker.service.ts | 17 +++------- .../day-calendar/day-calendar-config.model.ts | 12 +++++-- .../day-calendar/day-calendar.component.html | 2 +- .../day-calendar/day-calendar.component.ts | 8 ++--- .../day-calendar/day-calendar.service.spec.ts | 22 ++++++------ src/app/day-calendar/day-calendar.service.ts | 34 +++++++++++-------- src/app/day-calendar/day.model.ts | 1 + .../month-calendar/month-calendar-config.ts | 15 ++++++-- .../month-calendar.component.ts | 4 +-- .../month-calendar/month-calendar.service.ts | 10 +++--- .../time-select/time-select-config.model.ts | 11 ++++-- src/app/time-select/time-select.component.ts | 4 +-- src/app/time-select/time-select.service.ts | 30 ++++++++-------- 19 files changed, 146 insertions(+), 93 deletions(-) diff --git a/src/app/common/models/calendar.model.ts b/src/app/common/models/calendar.model.ts index 1913f7bf..fe2ac49a 100644 --- a/src/app/common/models/calendar.model.ts +++ b/src/app/common/models/calendar.model.ts @@ -1,7 +1,13 @@ -import {locale, Moment} from 'moment'; +import {Moment} from 'moment'; export interface ICalendar { + locale?: string; + min?: Moment | string; + max?: Moment | string; +} + +export interface ICalendarInternal { locale?: string; min?: Moment; max?: Moment; -} \ No newline at end of file +} diff --git a/src/app/common/services/utils/utils.service.spec.ts b/src/app/common/services/utils/utils.service.spec.ts index dc08dd2d..0e6a6a42 100644 --- a/src/app/common/services/utils/utils.service.spec.ts +++ b/src/app/common/services/utils/utils.service.spec.ts @@ -94,4 +94,11 @@ describe('Service: ObUtilsService', () => { moment().add(1, 'd')) ).toBeFalsy(); })); + + it('should convertPropsToMoment method', inject([UtilsService], (service: UtilsService) => { + const obj = {min: '14-01-1987', max: '14-01-1987'}; + service.convertPropsToMoment(obj, 'DD-MM-YYYY', ['min', 'max']); + expect(moment.isMoment(obj.min)).toBeTruthy(); + expect(moment.isMoment(obj.max)).toBeTruthy(); + })); }); diff --git a/src/app/common/services/utils/utils.service.ts b/src/app/common/services/utils/utils.service.ts index 4fa090ec..0f7aabd9 100644 --- a/src/app/common/services/utils/utils.service.ts +++ b/src/app/common/services/utils/utils.service.ts @@ -32,17 +32,14 @@ export class UtilsService { return new Array(size).fill(1); } - convertToMoment(date: SingleCalendarValue, format: string): Moment | null { - let retVal: Moment; + convertToMoment(date: SingleCalendarValue, format: string): Moment { if (!date) { return null; } else if (typeof date === 'string') { - retVal = moment(date, format); + return moment(date, format); } else { - retVal = date; + return date; } - - return retVal; } isDateValid(date: string, format: string): boolean { @@ -263,7 +260,10 @@ export class UtilsService { .map(d => moment(d, format)); } - shouldShowCurrent(showGoToCurrent: boolean, mode: CalendarMode, min: Moment, max: Moment): boolean { + shouldShowCurrent(showGoToCurrent: boolean, + mode: CalendarMode, + min: Moment, + max: Moment): boolean { return showGoToCurrent && mode !== 'time' && this.isDateInRange(moment(), min, max); @@ -272,4 +272,12 @@ export class UtilsService { isDateInRange(date: Moment, from: Moment, to: Moment): boolean { return date.isBetween(from, to, 'day', '[]'); } + + convertPropsToMoment(obj: {[key: string]: any}, format: string, props: string[]) { + props.forEach((prop) => { + if (obj.hasOwnProperty(prop)) { + obj[prop] = this.convertToMoment(obj[prop], format); + } + }); + } } diff --git a/src/app/date-picker/date-picker-config.model.ts b/src/app/date-picker/date-picker-config.model.ts index 2a8955d3..7eeab6d5 100644 --- a/src/app/date-picker/date-picker-config.model.ts +++ b/src/app/date-picker/date-picker-config.model.ts @@ -1,11 +1,9 @@ import {TDrops, TOpens} from '../common/types/poistions.type'; -import {IDayCalendarConfig} from '../day-calendar/day-calendar-config.model'; -import {IMonthCalendarConfig} from '../month-calendar/month-calendar-config'; -import {ITimeSelectConfig} from '../time-select/time-select-config.model'; +import {IDayCalendarConfig, IDayCalendarConfigInternal} from '../day-calendar/day-calendar-config.model'; +import {IMonthCalendarConfig, IMonthCalendarConfigInternal} from '../month-calendar/month-calendar-config'; +import {ITimeSelectConfig, ITimeSelectConfigInternal} from '../time-select/time-select-config.model'; -export interface IDatePickerConfig extends IDayCalendarConfig, - IMonthCalendarConfig, - ITimeSelectConfig { +export interface IConfig { closeOnSelect?: boolean; closeOnSelectDelay?: number; openOnFocus?: boolean; @@ -18,3 +16,16 @@ export interface IDatePickerConfig extends IDayCalendarConfig, opens?: TOpens; hideInputContainer?: boolean; } + +export interface IDatePickerConfig extends IConfig, + IDayCalendarConfig, + IMonthCalendarConfig, + ITimeSelectConfig { + +} + +export interface IDatePickerConfigInternal extends IConfig, + IDayCalendarConfigInternal, + IMonthCalendarConfigInternal, + ITimeSelectConfigInternal { +} diff --git a/src/app/date-picker/date-picker.component.ts b/src/app/date-picker/date-picker.component.ts index 587152ce..b5d33094 100644 --- a/src/app/date-picker/date-picker.component.ts +++ b/src/app/date-picker/date-picker.component.ts @@ -14,7 +14,7 @@ import {DayTimeCalendarService} from '../day-time-calendar/day-time-calendar.ser import {ITimeSelectConfig} from '../time-select/time-select-config.model'; import {TimeSelectComponent} from '../time-select/time-select.component'; import {TimeSelectService} from '../time-select/time-select.service'; -import {IDatePickerConfig} from './date-picker-config.model'; +import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config.model'; import {IDpDayPickerApi} from './date-picker.api'; import {DatePickerService} from './date-picker.service'; import { @@ -93,10 +93,9 @@ export class DatePickerComponent implements OnChanges, @ViewChild('container') calendarContainer: ElementRef; @ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent; - @ViewChild('monthCalendar') monthCalendarRef: DayCalendarComponent; @ViewChild('timeSelect') timeSelectRef: TimeSelectComponent; - componentConfig: IDatePickerConfig; + componentConfig: IDatePickerConfigInternal; dayCalendarConfig: IDayCalendarConfig; dayTimeCalendarConfig: IDayTimeCalendarConfig; timeSelectConfig: ITimeSelectConfig; diff --git a/src/app/date-picker/date-picker.directive.spec.ts b/src/app/date-picker/date-picker.directive.spec.ts index d1124bed..75422a70 100644 --- a/src/app/date-picker/date-picker.directive.spec.ts +++ b/src/app/date-picker/date-picker.directive.spec.ts @@ -17,7 +17,7 @@ describe('Directive: DpDayPicker', () => { }); }); - const directive = new DatePickerDirective(null, null, null, null); + const directive = new DatePickerDirective(null, null, null, null, null); it('should create an instance', () => { expect(directive).toBeTruthy(); diff --git a/src/app/date-picker/date-picker.service.ts b/src/app/date-picker/date-picker.service.ts index 464fa5d9..97ade4c8 100644 --- a/src/app/date-picker/date-picker.service.ts +++ b/src/app/date-picker/date-picker.service.ts @@ -1,5 +1,5 @@ import {EventEmitter, Injectable} from '@angular/core'; -import {IDatePickerConfig} from './date-picker-config.model'; +import {IDatePickerConfig, IDatePickerConfigInternal} from './date-picker-config.model'; import * as moment from 'moment'; import {Moment} from 'moment'; import {UtilsService} from '../common/services/utils/utils.service'; @@ -12,7 +12,7 @@ import {CalendarMode} from '../common/types/calendar-mode'; @Injectable() export class DatePickerService { readonly onPickerClosed: EventEmitter = new EventEmitter(); - private defaultConfig: IDatePickerConfig = { + private defaultConfig: IDatePickerConfigInternal = { closeOnSelect: true, closeOnSelectDelay: 100, format: 'DD-MM-YYYY', @@ -33,21 +33,14 @@ export class DatePickerService { } // todo:: add unit tests - getConfig(config: IDatePickerConfig, mode: CalendarMode = 'daytime'): IDatePickerConfig { - const _config: IDatePickerConfig = { + getConfig(config: IDatePickerConfig, mode: CalendarMode = 'daytime'): IDatePickerConfigInternal { + const _config = { ...this.defaultConfig, format: this.getDefaultFormatByMode(mode), ...this.utilsService.clearUndefined(config) }; - const {min, max, format} = _config; - if (min) { - _config.min = this.utilsService.convertToMoment(min, format); - } - - if (max) { - _config.max = this.utilsService.convertToMoment(max, format); - } + this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']); if (config && config.allowMultiSelect && config.closeOnSelect === undefined) { _config.closeOnSelect = false; diff --git a/src/app/day-calendar/day-calendar-config.model.ts b/src/app/day-calendar/day-calendar-config.model.ts index 81cbc11c..bb40d557 100644 --- a/src/app/day-calendar/day-calendar-config.model.ts +++ b/src/app/day-calendar/day-calendar-config.model.ts @@ -1,9 +1,9 @@ -import {ICalendar} from '../common/models/calendar.model'; +import {ICalendar, ICalendarInternal} from '../common/models/calendar.model'; import {WeekDays} from '../common/types/week-days.type'; import {Moment} from 'moment'; import {ECalendarValue} from '../common/types/calendar-value-enum'; -export interface IDayCalendarConfig extends ICalendar { +export interface IConfig { isDayDisabledCallback?: (date: Moment) => boolean; isMonthDisabledCallback?: (date: Moment) => boolean; weekDayFormat?: string; @@ -29,3 +29,11 @@ export interface IDayCalendarConfig extends ICalendar { returnedValueType?: ECalendarValue; showGoToCurrent?: boolean; } + +export interface IDayCalendarConfig extends IConfig, + ICalendar { +} + +export interface IDayCalendarConfigInternal extends IConfig, + ICalendarInternal { +} diff --git a/src/app/day-calendar/day-calendar.component.html b/src/app/day-calendar/day-calendar.component.html index 87740421..3b5abba0 100644 --- a/src/app/day-calendar/day-calendar.component.html +++ b/src/app/day-calendar/day-calendar.component.html @@ -26,7 +26,7 @@ class="dp-calendar-day" *ngFor="let day of week" (click)="dayClicked(day)" - [disabled]="isDisabledDay(day)" + [disabled]="day.disabled" [ngClass]="getDayBtnCssClass(day)"> {{getDayBtnText(day)}} diff --git a/src/app/day-calendar/day-calendar.component.ts b/src/app/day-calendar/day-calendar.component.ts index 75460659..6b5693c8 100644 --- a/src/app/day-calendar/day-calendar.component.ts +++ b/src/app/day-calendar/day-calendar.component.ts @@ -16,7 +16,7 @@ import { import {DayCalendarService} from './day-calendar.service'; import * as moment from 'moment'; import {Moment} from 'moment'; -import {IDayCalendarConfig} from './day-calendar-config.model'; +import {IDayCalendarConfig, IDayCalendarConfigInternal} from './day-calendar-config.model'; import {IDay} from './day.model'; import { ControlValueAccessor, @@ -65,7 +65,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce CalendarMode = ECalendarMode; isInited: boolean = false; - componentConfig: IDayCalendarConfig; + componentConfig: IDayCalendarConfigInternal; _selected: Moment[]; weeks: IDay[][]; weekdays: Moment[]; @@ -193,10 +193,6 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce this.onChangeCallback(this.processOnChangeCallback(this.selected)); } - isDisabledDay(day: IDay) { - return this.dayCalendarService.isDateDisabled(day, this.componentConfig); - } - dayClicked(day: IDay) { this.selected = this.utilsService .updateSelected(this.componentConfig.allowMultiSelect, this.selected, day); diff --git a/src/app/day-calendar/day-calendar.service.spec.ts b/src/app/day-calendar/day-calendar.service.spec.ts index 2467bcf5..857674c9 100644 --- a/src/app/day-calendar/day-calendar.service.spec.ts +++ b/src/app/day-calendar/day-calendar.service.spec.ts @@ -3,7 +3,7 @@ import {DayCalendarService} from './day-calendar.service'; import * as moment from 'moment'; import {Moment} from 'moment'; import {UtilsService} from '../common/services/utils/utils.service'; -import {IDayCalendarConfig} from './day-calendar-config.model'; +import {IDayCalendarConfig, IDayCalendarConfigInternal} from './day-calendar-config.model'; describe('Service: Calendar', () => { beforeEach(() => { @@ -112,29 +112,29 @@ describe('Service: Calendar', () => { it('should check isDateDisabled method', inject([DayCalendarService], (service: DayCalendarService) => { - const config: IDayCalendarConfig = { + const config: IDayCalendarConfigInternal = { firstDayOfWeek: 'su', min: moment('13-10-2016', 'DD-MM-YYYY').subtract(1, 'day'), max: moment('13-10-2016', 'DD-MM-YYYY').add(1, 'day') }; - expect(service.isDateDisabled({date: moment('11-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(true); - expect(service.isDateDisabled({date: moment('12-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false); - expect(service.isDateDisabled({date: moment('13-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false); - expect(service.isDateDisabled({date: moment('14-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false); - expect(service.isDateDisabled({date: moment('15-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(true); + expect(service.isDateDisabled(moment('11-10-2016', 'DD-MM-YYYY'), config)).toBe(true); + expect(service.isDateDisabled(moment('12-10-2016', 'DD-MM-YYYY'), config)).toBe(false); + expect(service.isDateDisabled(moment('13-10-2016', 'DD-MM-YYYY'), config)).toBe(false); + expect(service.isDateDisabled(moment('14-10-2016', 'DD-MM-YYYY'), config)).toBe(false); + expect(service.isDateDisabled(moment('15-10-2016', 'DD-MM-YYYY'), config)).toBe(true); config.isDayDisabledCallback = (date: Moment) => { return date.isSame(moment('13-10-2016', 'DD-MM-YYYY'), 'day'); }; - expect(service.isDateDisabled({date: moment('13-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(true); - expect(service.isDateDisabled({date: moment('11-10-2016', 'DD-MM-YYYY'), selected: false}, config)).toBe(false); + expect(service.isDateDisabled(moment('13-10-2016', 'DD-MM-YYYY'), config)).toBe(true); + expect(service.isDateDisabled(moment('11-10-2016', 'DD-MM-YYYY'), config)).toBe(false); })); it('should show/hide near month according to showNearMonthDays configuration', inject([DayCalendarService], (service: DayCalendarService) => { - const config: IDayCalendarConfig = { + const config: IDayCalendarConfigInternal = { firstDayOfWeek: 'su', showNearMonthDays: true }; @@ -147,7 +147,7 @@ describe('Service: Calendar', () => { it('should not effect the calendar when no full near weeks even if showNearMonthDays is false', inject([DayCalendarService], (service: DayCalendarService) => { - const config: IDayCalendarConfig = { + const config: IDayCalendarConfigInternal = { firstDayOfWeek: 'su', showNearMonthDays: false }; diff --git a/src/app/day-calendar/day-calendar.service.ts b/src/app/day-calendar/day-calendar.service.ts index cd34ff7d..d6cf7c6c 100644 --- a/src/app/day-calendar/day-calendar.service.ts +++ b/src/app/day-calendar/day-calendar.service.ts @@ -4,7 +4,7 @@ import {Moment} from 'moment'; import {WeekDays} from '../common/types/week-days.type'; import {UtilsService} from '../common/services/utils/utils.service'; import {IDay} from './day.model'; -import {IDayCalendarConfig} from './day-calendar-config.model'; +import {IDayCalendarConfig, IDayCalendarConfigInternal} from './day-calendar-config.model'; import {IMonthCalendarConfig} from '../month-calendar/month-calendar-config'; @Injectable() @@ -34,8 +34,14 @@ export class DayCalendarService { } } - getConfig(config: IDayCalendarConfig): IDayCalendarConfig { - const _config = {...this.DEFAULT_CONFIG, ...this.utilsService.clearUndefined(config)}; + getConfig(config: IDayCalendarConfig): IDayCalendarConfigInternal { + const _config = { + ...this.DEFAULT_CONFIG, + ...this.utilsService.clearUndefined(config) + }; + + this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']); + moment.locale(_config.locale); return _config; @@ -51,7 +57,7 @@ export class DayCalendarService { }, <{[key: number]: string}>{}); } - generateMonthArray(config: IDayCalendarConfig, month: Moment, selected: Moment[]): IDay[][] { + generateMonthArray(config: IDayCalendarConfigInternal, month: Moment, selected: Moment[]): IDay[][] { let monthArray: IDay[][] = []; const firstDayOfWeekIndex = this.DAYS.indexOf(config.firstDayOfWeek); const firstDayOfBoard = month.clone().startOf('month'); @@ -73,7 +79,8 @@ export class DayCalendarService { currentMonth: current.isSame(month, 'month'), prevMonth: current.isSame(prevMonth, 'month'), nextMonth: current.isSame(nextMonth, 'month'), - currentDay: current.isSame(today, 'day') + currentDay: current.isSame(today, 'day'), + disabled: this.isDateDisabled(current, config) }); current.add(1, 'day'); @@ -123,20 +130,20 @@ export class DayCalendarService { return weekdays; } - isDateDisabled(day: IDay, config: IDayCalendarConfig): boolean { + isDateDisabled(date: Moment, config: IDayCalendarConfigInternal): boolean { if (config.isDayDisabledCallback) { - return config.isDayDisabledCallback(day.date); + return config.isDayDisabledCallback(date); } - if (config.min && day.date.isBefore(config.min, 'day')) { + if (config.min && date.isBefore(config.min, 'day')) { return true; } - return !!(config.max && day.date.isAfter(config.max, 'day')); + return !!(config.max && date.isAfter(config.max, 'day')); } // todo:: add unit tests - getHeaderLabel(config: IDayCalendarConfig, month: Moment): string { + getHeaderLabel(config: IDayCalendarConfigInternal, month: Moment): string { if (config.monthFormatter) { return config.monthFormatter(month); } @@ -164,8 +171,7 @@ export class DayCalendarService { }, <{[key: number]: string}>{}); } - // todo:: add unit tests - getMonthCalendarConfig(componentConfig: IDayCalendarConfig): IMonthCalendarConfig { + getMonthCalendarConfig(componentConfig: IDayCalendarConfigInternal): IMonthCalendarConfig { return this.utilsService.clearUndefined({ min: componentConfig.min, max: componentConfig.max, @@ -183,7 +189,7 @@ export class DayCalendarService { }); } - getDayBtnText(config: IDayCalendarConfig, day: Moment): string { + getDayBtnText(config: IDayCalendarConfigInternal, day: Moment): string { if (config.dayBtnFormatter) { return config.dayBtnFormatter(day); } @@ -191,7 +197,7 @@ export class DayCalendarService { return day.format(config.dayBtnFormat); } - getDayBtnCssClass(config: IDayCalendarConfig, day: Moment): string { + getDayBtnCssClass(config: IDayCalendarConfigInternal, day: Moment): string { if (config.dayBtnCssClassCallback) { return config.dayBtnCssClassCallback(day); } diff --git a/src/app/day-calendar/day.model.ts b/src/app/day-calendar/day.model.ts index 05665a19..94fc108c 100644 --- a/src/app/day-calendar/day.model.ts +++ b/src/app/day-calendar/day.model.ts @@ -5,6 +5,7 @@ export interface IDay extends IDate { prevMonth?: boolean; nextMonth?: boolean; currentDay?: boolean; + disabled?: boolean; } export interface IDayEvent { diff --git a/src/app/month-calendar/month-calendar-config.ts b/src/app/month-calendar/month-calendar-config.ts index 9fd280ec..774bf4f1 100644 --- a/src/app/month-calendar/month-calendar-config.ts +++ b/src/app/month-calendar/month-calendar-config.ts @@ -1,8 +1,8 @@ -import {locale, Moment} from 'moment'; -import {ICalendar} from '../common/models/calendar.model'; +import {Moment} from 'moment'; +import {ICalendar, ICalendarInternal} from '../common/models/calendar.model'; import {ECalendarValue} from '../common/types/calendar-value-enum'; -export interface IMonthCalendarConfig extends ICalendar { +export interface IConfig { isMonthDisabledCallback?: (date: Moment) => boolean; allowMultiSelect?: boolean; yearFormat?: string; @@ -17,3 +17,12 @@ export interface IMonthCalendarConfig extends ICalendar { returnedValueType?: ECalendarValue; showGoToCurrent?: boolean; } + +export interface IMonthCalendarConfig extends IConfig, + ICalendar { + +} + +export interface IMonthCalendarConfigInternal extends IConfig, + ICalendarInternal { +} diff --git a/src/app/month-calendar/month-calendar.component.ts b/src/app/month-calendar/month-calendar.component.ts index a6fabc7f..649cd228 100644 --- a/src/app/month-calendar/month-calendar.component.ts +++ b/src/app/month-calendar/month-calendar.component.ts @@ -15,7 +15,7 @@ import {IMonth} from './month.model'; import {MonthCalendarService} from './month-calendar.service'; import * as moment from 'moment'; import {Moment} from 'moment'; -import {IMonthCalendarConfig} from './month-calendar-config'; +import {IMonthCalendarConfig, IMonthCalendarConfigInternal} from './month-calendar-config'; import { ControlValueAccessor, FormControl, @@ -58,7 +58,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc @Output() onNavHeaderBtnClick: EventEmitter = new EventEmitter(); isInited: boolean = false; - componentConfig: IMonthCalendarConfig; + componentConfig: IMonthCalendarConfigInternal; _selected: Moment[]; yearMonths: IMonth[][]; _currentDateView: Moment; diff --git a/src/app/month-calendar/month-calendar.service.ts b/src/app/month-calendar/month-calendar.service.ts index 564981c7..bed1665b 100644 --- a/src/app/month-calendar/month-calendar.service.ts +++ b/src/app/month-calendar/month-calendar.service.ts @@ -3,11 +3,11 @@ import * as moment from 'moment'; import {Moment} from 'moment'; import {UtilsService} from '../common/services/utils/utils.service'; import {IMonth} from './month.model'; -import {IMonthCalendarConfig} from './month-calendar-config'; +import {IMonthCalendarConfig, IMonthCalendarConfigInternal} from './month-calendar-config'; @Injectable() export class MonthCalendarService { - readonly DEFAULT_CONFIG: IMonthCalendarConfig = { + readonly DEFAULT_CONFIG: IMonthCalendarConfigInternal = { allowMultiSelect: false, yearFormat: 'YYYY', format: 'MM-YYYY', @@ -21,12 +21,14 @@ export class MonthCalendarService { constructor(private utilsService: UtilsService) { } - getConfig(config: IMonthCalendarConfig): IMonthCalendarConfig { - const _config: IMonthCalendarConfig = { + getConfig(config: IMonthCalendarConfig): IMonthCalendarConfigInternal { + const _config = { ...this.DEFAULT_CONFIG, ...this.utilsService.clearUndefined(config) }; + this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']); + moment.locale(_config.locale); return _config; diff --git a/src/app/time-select/time-select-config.model.ts b/src/app/time-select/time-select-config.model.ts index 05301b6d..b3b0c1c7 100644 --- a/src/app/time-select/time-select-config.model.ts +++ b/src/app/time-select/time-select-config.model.ts @@ -1,8 +1,8 @@ import {Moment} from 'moment/moment'; -import {ICalendar} from '../common/models/calendar.model'; +import {ICalendar, ICalendarInternal} from '../common/models/calendar.model'; import {ECalendarValue} from '../common/types/calendar-value-enum'; -export interface ITimeSelectConfig extends ICalendar { +export interface IConfig { hours12Format?: string; hours24Format?: string; maxTime?: Moment; @@ -17,3 +17,10 @@ export interface ITimeSelectConfig extends ICalendar { timeSeparator?: string; returnedValueType?: ECalendarValue; } + +export interface ITimeSelectConfig extends IConfig, ICalendar { +} + +export interface ITimeSelectConfigInternal extends IConfig, + ICalendarInternal { +} diff --git a/src/app/time-select/time-select.component.ts b/src/app/time-select/time-select.component.ts index 9be79825..6e25f233 100644 --- a/src/app/time-select/time-select.component.ts +++ b/src/app/time-select/time-select.component.ts @@ -15,7 +15,7 @@ import { import {TimeSelectService, TimeUnit} from './time-select.service'; import * as moment from 'moment'; import {Moment} from 'moment'; -import {ITimeSelectConfig} from './time-select-config.model'; +import {ITimeSelectConfig, ITimeSelectConfigInternal} from './time-select-config.model'; import { ControlValueAccessor, FormControl, @@ -61,7 +61,7 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces @Output() onChange: EventEmitter = new EventEmitter(); isInited: boolean = false; - componentConfig: ITimeSelectConfig; + componentConfig: ITimeSelectConfigInternal; _selected: Moment; inputValue: CalendarValue; inputValueType: ECalendarValue; diff --git a/src/app/time-select/time-select.service.ts b/src/app/time-select/time-select.service.ts index 6c4e0c1c..743bdab2 100644 --- a/src/app/time-select/time-select.service.ts +++ b/src/app/time-select/time-select.service.ts @@ -1,15 +1,15 @@ import {Injectable} from '@angular/core'; -import {Moment} from 'moment'; import * as moment from 'moment'; +import {Moment} from 'moment'; import {UtilsService} from '../common/services/utils/utils.service'; -import {ITimeSelectConfig} from './time-select-config.model'; +import {ITimeSelectConfig, ITimeSelectConfigInternal} from './time-select-config.model'; export type TimeUnit = 'hour' | 'minute' | 'second'; export const FIRST_PM_HOUR = 12; @Injectable() export class TimeSelectService { - readonly DEFAULT_CONFIG: ITimeSelectConfig = { + readonly DEFAULT_CONFIG: ITimeSelectConfigInternal = { hours12Format: 'hh', hours24Format: 'HH', meridiemFormat: 'A', @@ -26,13 +26,13 @@ export class TimeSelectService { constructor(private utilsService: UtilsService) { } - getConfig(config: ITimeSelectConfig): ITimeSelectConfig { + getConfig(config: ITimeSelectConfig): ITimeSelectConfigInternal { const timeConfigs = { maxTime: this.utilsService.onlyTime(config && config.maxTime), minTime: this.utilsService.onlyTime(config && config.minTime) }; - const _config = { + const _config = { ...this.DEFAULT_CONFIG, ...this.utilsService.clearUndefined(config), ...timeConfigs @@ -43,33 +43,33 @@ export class TimeSelectService { return _config; } - getTimeFormat(config: ITimeSelectConfig): string { + getTimeFormat(config: ITimeSelectConfigInternal): string { return (config.showTwentyFourHours ? config.hours24Format : config.hours12Format) + config.timeSeparator + config.minutesFormat + (config.showSeconds ? (config.timeSeparator + config.secondsFormat) : '') + (config.showTwentyFourHours ? '' : ' ' + config.meridiemFormat); } - getHours(config: ITimeSelectConfig, t: Moment | null): string { + getHours(config: ITimeSelectConfigInternal, t: Moment | null): string { const time = t || moment(); return time && time.format(config.showTwentyFourHours ? config.hours24Format : config.hours12Format); } - getMinutes(config: ITimeSelectConfig, t: Moment | null): string { + getMinutes(config: ITimeSelectConfigInternal, t: Moment | null): string { const time = t || moment(); return time && time.format(config.minutesFormat); } - getSeconds(config: ITimeSelectConfig, t: Moment | null): string { + getSeconds(config: ITimeSelectConfigInternal, t: Moment | null): string { const time = t || moment(); return time && time.format(config.secondsFormat); } - getMeridiem(config: ITimeSelectConfig, time: Moment): string { + getMeridiem(config: ITimeSelectConfigInternal, time: Moment): string { return time && time.format(config.meridiemFormat); } - decrease(config: ITimeSelectConfig, time: Moment, unit: TimeUnit): Moment { + decrease(config: ITimeSelectConfigInternal, time: Moment, unit: TimeUnit): Moment { let amount: number = 1; switch (unit) { case 'minute': @@ -82,7 +82,7 @@ export class TimeSelectService { return time.clone().subtract(amount, unit); } - increase(config: ITimeSelectConfig, time: Moment, unit: TimeUnit): Moment { + increase(config: ITimeSelectConfigInternal, time: Moment, unit: TimeUnit): Moment { let amount: number = 1; switch (unit) { case 'minute': @@ -103,7 +103,7 @@ export class TimeSelectService { } } - shouldShowDecrease(config: ITimeSelectConfig, time: Moment, unit: TimeUnit): boolean { + shouldShowDecrease(config: ITimeSelectConfigInternal, time: Moment, unit: TimeUnit): boolean { if (!config.min && !config.minTime) { return true; } @@ -114,7 +114,7 @@ export class TimeSelectService { && (!config.minTime || config.minTime.isSameOrBefore(this.utilsService.onlyTime(newTime))); } - shouldShowIncrease(config: ITimeSelectConfig, time: Moment, unit: TimeUnit): boolean { + shouldShowIncrease(config: ITimeSelectConfigInternal, time: Moment, unit: TimeUnit): boolean { if (!config.max && !config.maxTime) { return true; } @@ -125,7 +125,7 @@ export class TimeSelectService { && (!config.maxTime || config.maxTime.isSameOrAfter(this.utilsService.onlyTime(newTime))); } - shouldShowToggleMeridiem(config: ITimeSelectConfig, time: Moment): boolean { + shouldShowToggleMeridiem(config: ITimeSelectConfigInternal, time: Moment): boolean { if (!config.min && !config.max && !config.minTime && !config.maxTime) { return true; }