Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

resolves #250 - Documentation for max date Moment|String is wrong #260

Merged
merged 3 commits into from
Oct 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/app/common/models/calendar.model.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
7 changes: 7 additions & 0 deletions src/app/common/services/utils/utils.service.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}));
});
22 changes: 15 additions & 7 deletions src/app/common/services/utils/utils.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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);
}
});
}
}
23 changes: 17 additions & 6 deletions src/app/date-picker/date-picker-config.model.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
}
5 changes: 2 additions & 3 deletions src/app/date-picker/date-picker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/app/date-picker/date-picker.directive.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
17 changes: 5 additions & 12 deletions src/app/date-picker/date-picker.service.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -12,7 +12,7 @@ import {CalendarMode} from '../common/types/calendar-mode';
@Injectable()
export class DatePickerService {
readonly onPickerClosed: EventEmitter<null> = new EventEmitter();
private defaultConfig: IDatePickerConfig = {
private defaultConfig: IDatePickerConfigInternal = {
closeOnSelect: true,
closeOnSelectDelay: 100,
format: 'DD-MM-YYYY',
Expand All @@ -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 = <IDatePickerConfigInternal>{
...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;
Expand Down
12 changes: 10 additions & 2 deletions src/app/day-calendar/day-calendar-config.model.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
}
2 changes: 1 addition & 1 deletion src/app/day-calendar/day-calendar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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)}}
</button>
Expand Down
8 changes: 2 additions & 6 deletions src/app/day-calendar/day-calendar.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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[];
Expand Down Expand Up @@ -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);
Expand Down
22 changes: 11 additions & 11 deletions src/app/day-calendar/day-calendar.service.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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
};
Expand All @@ -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
};
Expand Down
34 changes: 20 additions & 14 deletions src/app/day-calendar/day-calendar.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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 = <IDayCalendarConfigInternal>{
...this.DEFAULT_CONFIG,
...this.utilsService.clearUndefined(config)
};

this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);

moment.locale(_config.locale);

return _config;
Expand All @@ -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');
Expand All @@ -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');

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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,
Expand All @@ -183,15 +189,15 @@ export class DayCalendarService {
});
}

getDayBtnText(config: IDayCalendarConfig, day: Moment): string {
getDayBtnText(config: IDayCalendarConfigInternal, day: Moment): string {
if (config.dayBtnFormatter) {
return config.dayBtnFormatter(day);
}

return day.format(config.dayBtnFormat);
}

getDayBtnCssClass(config: IDayCalendarConfig, day: Moment): string {
getDayBtnCssClass(config: IDayCalendarConfigInternal, day: Moment): string {
if (config.dayBtnCssClassCallback) {
return config.dayBtnCssClassCallback(day);
}
Expand Down
Loading