+
+
+
+
+
diff --git a/src/demo/demo/config-form/config-form.component.ts b/src/demo/demo/config-form/config-form.component.ts
index d0ec64cd..917d52c5 100644
--- a/src/demo/demo/config-form/config-form.component.ts
+++ b/src/demo/demo/config-form/config-form.component.ts
@@ -53,8 +53,8 @@ const MONTH_CALENDAR_OPTION_KEYS = [
'max',
'min',
'monthBtnFormat',
- 'multipleYearsNavigateBy',
- 'showMultipleYearsNavigation',
+ 'secondaryNavigationStepMonthView',
+ 'showSecondaryNavigationMonthView',
'yearFormat',
'showGoToCurrent',
'unSelectOnClick',
@@ -78,6 +78,8 @@ const DAY_CALENDAR_OPTION_KEYS = [
'showGoToCurrent',
'unSelectOnClick',
'moveCalendarTo',
+ 'secondaryNavigationStepDayView',
+ 'showSecondaryNavigationDayView',
...MONTH_CALENDAR_OPTION_KEYS
];
const TIME_SELECT_SHARED_OPTION_KEYS = [
@@ -218,8 +220,10 @@ export class ConfigFormComponent implements OnInit {
showSeconds: FormControl;
showTwentyFourHours: FormControl;
timeSeparator: FormControl;
- showMultipleYearsNavigation: FormControl;
- multipleYearsNavigateBy: FormControl;
+ showSecondaryNavigationMonthView: FormControl;
+ secondaryNavigationStepMonthView: FormControl;
+ showSecondaryNavigationDayView: FormControl;
+ secondaryNavigationStepDayView: FormControl;
returnedValueType: FormControl;
closeOnEnter: FormControl;
numOfMonthRows: FormControl;
@@ -265,8 +269,10 @@ export class ConfigFormComponent implements OnInit {
this.showSeconds = new FormControl(this.config.showSeconds);
this.showTwentyFourHours = new FormControl(this.config.showTwentyFourHours);
this.timeSeparator = new FormControl(this.config.timeSeparator);
- this.showMultipleYearsNavigation = new FormControl(this.config.showMultipleYearsNavigation);
- this.multipleYearsNavigateBy = new FormControl(this.config.multipleYearsNavigateBy);
+ this.showSecondaryNavigationMonthView = new FormControl(this.config.showSecondaryNavigationMonthView);
+ this.secondaryNavigationStepMonthView = new FormControl(this.config.secondaryNavigationStepMonthView);
+ this.showSecondaryNavigationDayView = new FormControl(this.config.showSecondaryNavigationDayView);
+ this.secondaryNavigationStepDayView = new FormControl(this.config.secondaryNavigationStepDayView);
this.returnedValueType = new FormControl(this.config.returnedValueType);
this.closeOnEnter = new FormControl(this.config.closeOnEnter);
this.numOfMonthRows = new FormControl(this.config.numOfMonthRows);
@@ -598,15 +604,27 @@ export class ConfigFormComponent implements OnInit {
});
});
- this.showMultipleYearsNavigation.valueChanges.subscribe((val) => {
+ this.showSecondaryNavigationMonthView.valueChanges.subscribe((val) => {
this.onConfigChange.emit({
- showMultipleYearsNavigation: val
+ showSecondaryNavigationMonthView: val
});
});
- this.multipleYearsNavigateBy.valueChanges.subscribe((val) => {
+ this.secondaryNavigationStepMonthView.valueChanges.subscribe((val) => {
this.onConfigChange.emit({
- multipleYearsNavigateBy: val
+ secondaryNavigationStepMonthView: val
+ });
+ });
+
+ this.showSecondaryNavigationDayView.valueChanges.subscribe((val) => {
+ this.onConfigChange.emit({
+ showSecondaryNavigationDayView: val
+ });
+ });
+
+ this.secondaryNavigationStepDayView.valueChanges.subscribe((val) => {
+ this.onConfigChange.emit({
+ secondaryNavigationStepDayView: val
});
});
diff --git a/src/demo/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.ts b/src/demo/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.ts
index 48f91f9c..73778fe4 100644
--- a/src/demo/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.ts
+++ b/src/demo/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.ts
@@ -13,7 +13,9 @@ export class DayTimeDemoComponent extends DateComponent implements OnInit {
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'DD-MM-YYYY HH:mm:ss'
+ format: 'DD-MM-YYYY HH:mm:ss',
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.ts b/src/demo/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.ts
index 4fa98855..e278530f 100644
--- a/src/demo/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.ts
+++ b/src/demo/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.ts
@@ -13,7 +13,9 @@ export class DayTimeDirectiveDemoComponent extends DateComponent implements OnIn
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'DD-MM-YYYY HH:mm:ss'
+ format: 'DD-MM-YYYY HH:mm:ss',
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.ts b/src/demo/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.ts
index b9d1163c..ddce4abe 100644
--- a/src/demo/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.ts
+++ b/src/demo/demo/date-pickers/day-time/day-time-inline-demo/day-time-inline-demo.component.ts
@@ -13,7 +13,9 @@ export class DayTimeInlineDemoComponent extends DateComponent implements OnInit
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'DD-MM-YYYY HH:mm:ss'
+ format: 'DD-MM-YYYY HH:mm:ss',
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/day/day-demo/day-demo.component.ts b/src/demo/demo/date-pickers/day/day-demo/day-demo.component.ts
index ca4fd32f..5282d644 100644
--- a/src/demo/demo/date-pickers/day/day-demo/day-demo.component.ts
+++ b/src/demo/demo/date-pickers/day/day-demo/day-demo.component.ts
@@ -13,7 +13,9 @@ export class DayDemoComponent extends DateComponent implements OnInit {
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'DD-MM-YYYY'
+ format: 'DD-MM-YYYY',
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.ts b/src/demo/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.ts
index 3e8b22de..ddf03834 100644
--- a/src/demo/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.ts
+++ b/src/demo/demo/date-pickers/day/day-directive-demo/day-directive-demo.component.ts
@@ -14,7 +14,9 @@ export class DayDirectiveDemoComponent extends DateComponent implements OnInit {
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'DD-MM-YYYY'
+ format: 'DD-MM-YYYY',
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.ts b/src/demo/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.ts
index d4d89883..570a3e0c 100644
--- a/src/demo/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.ts
+++ b/src/demo/demo/date-pickers/day/day-inline-demo/day-inline-demo.component.ts
@@ -13,7 +13,9 @@ export class DayInlineDemoComponent extends DateComponent implements OnInit {
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'DD-MM-YYYY'
+ format: 'DD-MM-YYYY',
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/month/month-demo/month-demo.component.ts b/src/demo/demo/date-pickers/month/month-demo/month-demo.component.ts
index 1897b28f..5af1465e 100644
--- a/src/demo/demo/date-pickers/month/month-demo/month-demo.component.ts
+++ b/src/demo/demo/date-pickers/month/month-demo/month-demo.component.ts
@@ -13,7 +13,8 @@ export class MonthDemoComponent extends DateComponent implements OnInit {
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'MMM, YYYY'
+ format: 'MMM, YYYY',
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.ts b/src/demo/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.ts
index 004927ed..6ae7234c 100644
--- a/src/demo/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.ts
+++ b/src/demo/demo/date-pickers/month/month-directive-demo/month-directive-demo.component.ts
@@ -13,7 +13,8 @@ export class MonthDirectiveDemoComponent extends DateComponent implements OnInit
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'MMM, YYYY'
+ format: 'MMM, YYYY',
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/date-pickers/month/month-inline/month-inline-demo.component.ts b/src/demo/demo/date-pickers/month/month-inline/month-inline-demo.component.ts
index 5787845c..dda6702c 100644
--- a/src/demo/demo/date-pickers/month/month-inline/month-inline-demo.component.ts
+++ b/src/demo/demo/date-pickers/month/month-inline/month-inline-demo.component.ts
@@ -13,7 +13,8 @@ export class MonthInlineDemoComponent extends DateComponent implements OnInit {
control: FormControl;
config: IDatePickerConfig = {
...DEF_CONF,
- format: 'MMM, YYYY'
+ format: 'MMM, YYYY',
+ secondaryNavigationStepMonthView: 10
};
ngOnInit(): void {
diff --git a/src/demo/demo/demo.component.ts b/src/demo/demo/demo.component.ts
index 5ec758b1..ad28291b 100644
--- a/src/demo/demo/demo.component.ts
+++ b/src/demo/demo/demo.component.ts
@@ -61,8 +61,8 @@ const MONTH_CALENDAR_OPTION_KEYS = [
'max',
'min',
'monthBtnFormat',
- 'multipleYearsNavigateBy',
- 'showMultipleYearsNavigation',
+ 'secondaryNavigationStepMonthView',
+ 'showSecondaryNavigationMonthView',
'yearFormat',
'showGoToCurrent',
'unSelectOnClick',
@@ -85,6 +85,8 @@ const DAY_CALENDAR_OPTION_KEYS = [
'showGoToCurrent',
'unSelectOnClick',
'moveCalendarTo',
+ 'secondaryNavigationStepDayView',
+ 'showSecondaryNavigationDayView',
...MONTH_CALENDAR_OPTION_KEYS
];
const TIME_SELECT_SHARED_OPTION_KEYS = [
@@ -203,8 +205,10 @@ export class DemoComponent implements OnInit {
showSeconds: false,
showTwentyFourHours: false,
timeSeparator: ':',
- multipleYearsNavigateBy: 10,
- showMultipleYearsNavigation: false,
+ secondaryNavigationStepMonthView: 10,
+ showSecondaryNavigationMonthView: false,
+ secondaryNavigationStepDayView: 12,
+ showSecondaryNavigationDayView: false,
locale: moment.locale(),
hideInputContainer: false,
returnedValueType: ECalendarValue.String,
diff --git a/src/lib/calendar-nav/calendar-nav.component.less b/src/lib/calendar-nav/calendar-nav.component.less
index 4c59ae78..b1b34d0e 100644
--- a/src/lib/calendar-nav/calendar-nav.component.less
+++ b/src/lib/calendar-nav/calendar-nav.component.less
@@ -53,7 +53,7 @@
.dp-calendar-secondary-nav-right {
left: initial;
- right: 5px;
+ //right: 5px;
}
.dp-calendar-nav-left {
diff --git a/src/lib/common/services/utils/utils.service.ts b/src/lib/common/services/utils/utils.service.ts
index 2fef24d6..586811b8 100644
--- a/src/lib/common/services/utils/utils.service.ts
+++ b/src/lib/common/services/utils/utils.service.ts
@@ -323,6 +323,21 @@ export class UtilsService {
});
}
+ handleDeprecatedParameters(config: {[key: string]: any}) {
+ if (config.showMultipleYearsNavigation !== null && config.showMultipleYearsNavigation !== undefined) {
+ console.warn('ng2-date-picker: Warning, showMultipleYearsNavigation parameter is deprecated'
+ + ' and will be removed in a further release. Please use showSecondaryNavigationMonthView parameter instead');
+ config.showSecondaryNavigationMonthView = config.showMultipleYearsNavigation;
+ delete config.showMultipleYearsNavigation;
+ }
+ if (config.multipleYearsNavigateBy !== null && config.multipleYearsNavigateBy !== undefined) {
+ console.warn('ng2-date-picker: Warning, multipleYearsNavigateBy parameter is deprecated'
+ + ' and will be removed in a further release. Please use secondaryNavigationStepMonthView parameter instead');
+ config.secondaryNavigationStepMonthView = config.multipleYearsNavigateBy;
+ delete config.multipleYearsNavigateBy;
+ }
+ }
+
shouldResetCurrentView
(prevConf: T, currentConf: T): boolean {
if (prevConf && currentConf) {
if (!prevConf.min && currentConf.min) {
diff --git a/src/lib/common/styles/variables.less b/src/lib/common/styles/variables.less
index 49162f8a..816b777f 100644
--- a/src/lib/common/styles/variables.less
+++ b/src/lib/common/styles/variables.less
@@ -33,6 +33,6 @@
}
&::before {
- right: -10px;
+ right: -3px;
}
}
diff --git a/src/lib/date-picker/date-picker.service.ts b/src/lib/date-picker/date-picker.service.ts
index b996ce93..d9947866 100644
--- a/src/lib/date-picker/date-picker.service.ts
+++ b/src/lib/date-picker/date-picker.service.ts
@@ -45,6 +45,7 @@ export class DatePickerService {
};
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
+ this.utilsService.handleDeprecatedParameters(_config);
if (config && config.allowMultiSelect && config.closeOnSelect === undefined) {
_config.closeOnSelect = false;
@@ -78,8 +79,10 @@ export class DatePickerService {
monthBtnFormat: pickerConfig.monthBtnFormat,
monthBtnFormatter: pickerConfig.monthBtnFormatter,
monthBtnCssClassCallback: pickerConfig.monthBtnCssClassCallback,
- multipleYearsNavigateBy: pickerConfig.multipleYearsNavigateBy,
- showMultipleYearsNavigation: pickerConfig.showMultipleYearsNavigation,
+ secondaryNavigationStepMonthView: pickerConfig.secondaryNavigationStepMonthView,
+ showSecondaryNavigationMonthView: pickerConfig.showSecondaryNavigationMonthView,
+ secondaryNavigationStepDayView: pickerConfig.secondaryNavigationStepDayView,
+ showSecondaryNavigationDayView: pickerConfig.showSecondaryNavigationDayView,
locale: pickerConfig.locale,
returnedValueType: pickerConfig.returnedValueType,
showGoToCurrent: pickerConfig.showGoToCurrent,
diff --git a/src/lib/day-calendar/day-calendar-config.model.ts b/src/lib/day-calendar/day-calendar-config.model.ts
index 9874cd43..25800542 100644
--- a/src/lib/day-calendar/day-calendar-config.model.ts
+++ b/src/lib/day-calendar/day-calendar-config.model.ts
@@ -24,8 +24,12 @@ export interface IConfig {
monthBtnFormat?: string;
monthBtnFormatter?: (day: Moment) => string;
monthBtnCssClassCallback?: (day: Moment) => string;
- multipleYearsNavigateBy?: number;
- showMultipleYearsNavigation?: boolean;
+ multipleYearsNavigateBy?: number; // deprecated warning
+ showMultipleYearsNavigation?: boolean; // deprecated warning
+ secondaryNavigationStepDayView?: number;
+ showSecondaryNavigationDayView?: boolean;
+ secondaryNavigationStepMonthView?: number;
+ showSecondaryNavigationMonthView?: boolean;
returnedValueType?: ECalendarValue;
showGoToCurrent?: boolean;
unSelectOnClick?: boolean;
diff --git a/src/lib/day-calendar/day-calendar.component.html b/src/lib/day-calendar/day-calendar.component.html
index c98926b5..9643c551 100644
--- a/src/lib/day-calendar/day-calendar.component.html
+++ b/src/lib/day-calendar/day-calendar.component.html
@@ -3,12 +3,16 @@
(onGoToCurrent)="goToCurrent()"
(onLabelClick)="toggleCalendarMode(CalendarMode.Month)"
(onLeftNav)="onLeftNavClick()"
+ (onLeftSecondaryNav)="onLeftSecondaryNavClick()"
(onRightNav)="onRightNavClick()"
+ (onRightSecondaryNav)="onRightSecondaryNavClick()"
[isLabelClickable]="componentConfig.enableMonthSelector"
[label]="navLabel"
[showGoToCurrent]="_shouldShowCurrent"
[showLeftNav]="showLeftNav"
+ [showLeftSecondaryNav]="showSecondaryLeftNav"
[showRightNav]="showRightNav"
+ [showRightSecondaryNav]="showSecondaryRightNav"
[theme]="theme">
diff --git a/src/lib/day-calendar/day-calendar.component.spec.ts b/src/lib/day-calendar/day-calendar.component.spec.ts
index 55d5bd90..99ab1eff 100644
--- a/src/lib/day-calendar/day-calendar.component.spec.ts
+++ b/src/lib/day-calendar/day-calendar.component.spec.ts
@@ -138,4 +138,33 @@ describe('Component: DayCalendarComponent', () => {
component.goToCurrent();
expect(component.onGoToCurrent.emit).toHaveBeenCalled();
});
+
+ describe('should display secondary nav buttons if necessary', () => {
+ it('should not display secondary navigation button when not asked to', () => {
+ const currentDate = moment();
+ // updates showLeftNav && showLeftSecondaryNav
+ component.currentDateView = currentDate;
+ expect(component.showSecondaryLeftNav).toBeFalsy();
+ })
+
+ it('should display secondary navigation button when true in config', () => {
+ const currentDate = moment();
+ component.componentConfig.showSecondaryNavigationDayView = true;
+
+ // updates showLeftNav && showLeftSecondaryNav
+ component.currentDateView = currentDate;
+ expect(component.showSecondaryLeftNav).toBeTruthy();
+ })
+
+ it('should not display secondary navigation button when primary button is not displayed', () => {
+ const currentDate = moment();
+ component.componentConfig.min = currentDate.clone();
+ component.componentConfig.showSecondaryNavigationDayView = true;
+
+ // updates showLeftNav && showLeftSecondaryNav
+ component.currentDateView = currentDate;
+
+ expect(component.showSecondaryLeftNav).toBeFalsy();
+ })
+ });
});
diff --git a/src/lib/day-calendar/day-calendar.component.ts b/src/lib/day-calendar/day-calendar.component.ts
index 7ec681ba..ab19ad66 100644
--- a/src/lib/day-calendar/day-calendar.component.ts
+++ b/src/lib/day-calendar/day-calendar.component.ts
@@ -80,6 +80,8 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
this.showLeftNav = this.dayCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
this.showRightNav = this.dayCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
+ this.showSecondaryLeftNav = this.componentConfig.showSecondaryNavigationDayView && this.showLeftNav;
+ this.showSecondaryRightNav = this.componentConfig.showSecondaryNavigationDayView && this.showRightNav;
}
;
@@ -108,6 +110,8 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
navLabel: string;
showLeftNav: boolean;
showRightNav: boolean;
+ showSecondaryLeftNav: boolean;
+ showSecondaryRightNav: boolean;
api = {
moveCalendarsBy: this.moveCalendarsBy.bind(this),
moveCalendarTo: this.moveCalendarTo.bind(this),
@@ -253,6 +257,15 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
this.onLeftNav.emit({from, to});
}
+ onLeftSecondaryNavClick(): void {
+ const targetDate = this.dayCalendarService.computeDateAfterLeftSecondaryNav(this.componentConfig, this.currentDateView);
+
+ const from = this.currentDateView.clone();
+ this.currentDateView = targetDate;
+ const to = this.currentDateView.clone();
+ this.onLeftNav.emit({from, to});
+ }
+
onRightNavClick() {
const from = this.currentDateView.clone();
this.moveCalendarsBy(this.currentDateView, 1, 'month');
@@ -260,6 +273,15 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
this.onRightNav.emit({from, to});
}
+ onRightSecondaryNavClick(): void {
+ const targetDate = this.dayCalendarService.computeDateAfterRightSecondaryNav(this.componentConfig, this.currentDateView);
+
+ const from = this.currentDateView.clone();
+ this.currentDateView = targetDate;
+ const to = this.currentDateView.clone();
+ this.onRightNav.emit({from, to});
+ }
+
onMonthCalendarLeftClick(change: INavEvent) {
this.onLeftNav.emit(change);
}
diff --git a/src/lib/day-calendar/day-calendar.service.spec.ts b/src/lib/day-calendar/day-calendar.service.spec.ts
index 6f7b6544..93019b56 100644
--- a/src/lib/day-calendar/day-calendar.service.spec.ts
+++ b/src/lib/day-calendar/day-calendar.service.spec.ts
@@ -176,4 +176,21 @@ describe('Service: Calendar', () => {
expect(service.getDayBtnCssClass({dayBtnCssClassCallback: (m => 'class1 class2')}, date))
.toEqual('class1 class2');
}));
+
+ it('should navigate to min date if secondaryStep is too big',
+ inject([DayCalendarService],
+ (service: DayCalendarService) => {
+ const currentDate = moment();
+ const minDate = currentDate.clone().subtract('4', 'month');
+
+ const config: IDayCalendarConfigInternal = {
+ min: minDate,
+ showSecondaryNavigationDayView: true,
+ secondaryNavigationStepDayView: 10
+ };
+
+ const targetDate = service.computeDateAfterLeftSecondaryNav(config, currentDate);
+
+ expect(targetDate.format('YYYY-MM-DD')).toEqual(minDate.format('YYYY-MM-DD'));
+ }));
});
diff --git a/src/lib/day-calendar/day-calendar.service.ts b/src/lib/day-calendar/day-calendar.service.ts
index 3f84e456..9364d398 100644
--- a/src/lib/day-calendar/day-calendar.service.ts
+++ b/src/lib/day-calendar/day-calendar.service.ts
@@ -11,6 +11,8 @@ const moment = momentNs;
@Injectable()
export class DayCalendarService {
+
+
readonly DEFAULT_CONFIG: IDayCalendarConfig = {
showNearMonthDays: true,
showWeekNumbers: false,
@@ -22,7 +24,9 @@ export class DayCalendarService {
enableMonthSelector: true,
locale: moment.locale(),
dayBtnFormat: 'DD',
- unSelectOnClick: true
+ unSelectOnClick: true,
+ secondaryNavigationStepDayView: 12,
+ secondaryNavigationStepMonthView: 10
};
private readonly DAYS = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];
@@ -36,6 +40,7 @@ export class DayCalendarService {
};
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
+ this.utilsService.handleDeprecatedParameters(_config);
moment.locale(_config.locale);
@@ -175,8 +180,8 @@ export class DayCalendarService {
monthBtnFormat: componentConfig.monthBtnFormat,
monthBtnFormatter: componentConfig.monthBtnFormatter,
monthBtnCssClassCallback: componentConfig.monthBtnCssClassCallback,
- multipleYearsNavigateBy: componentConfig.multipleYearsNavigateBy,
- showMultipleYearsNavigation: componentConfig.showMultipleYearsNavigation,
+ showSecondaryNavigationMonthView: componentConfig.showSecondaryNavigationMonthView,
+ secondaryNavigationStepMonthView: componentConfig.secondaryNavigationStepMonthView,
showGoToCurrent: componentConfig.showGoToCurrent,
numOfMonthRows: componentConfig.numOfMonthRows
});
@@ -198,6 +203,42 @@ export class DayCalendarService {
return '';
}
+ computeDateAfterLeftSecondaryNav(componentConfig: IDayCalendarConfigInternal, currentDateView: momentNs.Moment) {
+ let navigateBy = componentConfig.secondaryNavigationStepDayView;
+ let targetDate = currentDateView.clone().subtract(navigateBy, 'month');
+
+ if (componentConfig.min) {
+ const yearsDiff = targetDate.year() - componentConfig.min.year();
+ const monthsDiff = targetDate.month() - componentConfig.min.month();
+ const isOutsideRange = (yearsDiff * 12) + monthsDiff < 0;
+
+ if (isOutsideRange) {
+ navigateBy = (currentDateView.year() - componentConfig.min.year()) * 12
+ + (currentDateView.month() - componentConfig.min.month());
+ targetDate = currentDateView.clone().subtract(navigateBy, 'month');
+ }
+ }
+ return targetDate;
+ }
+
+ computeDateAfterRightSecondaryNav(componentConfig: IDayCalendarConfigInternal, currentDateView: momentNs.Moment) {
+ let navigateBy = componentConfig.secondaryNavigationStepDayView;
+ let targetDate = currentDateView.clone().add(navigateBy, 'month');
+
+ if (componentConfig.max) {
+ const yearsDiff = targetDate.year() - componentConfig.max.year();
+ const monthsDiff = targetDate.month() - componentConfig.max.month();
+ const isOutsideRange = (yearsDiff * 12) + monthsDiff > 0;
+
+ if (isOutsideRange) {
+ navigateBy = (componentConfig.max.year() - currentDateView.year()) * 12
+ + (componentConfig.max.month() - currentDateView.month());
+ targetDate = currentDateView.clone().add(navigateBy, 'month');
+ }
+ }
+ return targetDate;
+ }
+
private removeNearMonthWeeks(currentMonth: Moment, monthArray: IDay[][]): IDay[][] {
if (monthArray[monthArray.length - 1].find((day) => day.date.isSame(currentMonth, 'month'))) {
return monthArray;
diff --git a/src/lib/day-time-calendar/day-time-calendar.service.ts b/src/lib/day-time-calendar/day-time-calendar.service.ts
index e05b80ae..14e5c59b 100644
--- a/src/lib/day-time-calendar/day-time-calendar.service.ts
+++ b/src/lib/day-time-calendar/day-time-calendar.service.ts
@@ -31,6 +31,7 @@ export class DayTimeCalendarService {
...this.dayCalendarService.getConfig(config)
};
+ this.utilsService.handleDeprecatedParameters(_config);
moment.locale(config.locale);
return _config;
diff --git a/src/lib/month-calendar/month-calendar-config.ts b/src/lib/month-calendar/month-calendar-config.ts
index a5d39d10..21773531 100644
--- a/src/lib/month-calendar/month-calendar-config.ts
+++ b/src/lib/month-calendar/month-calendar-config.ts
@@ -13,8 +13,10 @@ export interface IConfig {
monthBtnFormatter?: (day: Moment) => string;
numOfMonthRows?: number;
monthBtnCssClassCallback?: (day: Moment) => string;
- multipleYearsNavigateBy?: number;
- showMultipleYearsNavigation?: boolean;
+ secondaryNavigationStepDayView?: number;
+ showSecondaryNavigationDayView?: boolean;
+ secondaryNavigationStepMonthView?: number;
+ showSecondaryNavigationMonthView?: boolean;
returnedValueType?: ECalendarValue;
showGoToCurrent?: boolean;
unSelectOnClick?: boolean;
diff --git a/src/lib/month-calendar/month-calendar.component.ts b/src/lib/month-calendar/month-calendar.component.ts
index d1286a46..c93b025a 100644
--- a/src/lib/month-calendar/month-calendar.component.ts
+++ b/src/lib/month-calendar/month-calendar.component.ts
@@ -77,8 +77,8 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
this.showLeftNav = this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this._currentDateView);
this.showRightNav = this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
- this.showSecondaryLeftNav = this.componentConfig.showMultipleYearsNavigation && this.showLeftNav;
- this.showSecondaryRightNav = this.componentConfig.showMultipleYearsNavigation && this.showRightNav;
+ this.showSecondaryLeftNav = this.componentConfig.showSecondaryNavigationMonthView && this.showLeftNav;
+ this.showSecondaryRightNav = this.componentConfig.showSecondaryNavigationMonthView && this.showRightNav;
}
@Input() config: IMonthCalendarConfig;
@@ -91,8 +91,6 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
@Output() onGoToCurrent: EventEmitter = new EventEmitter();
@Output() onLeftNav: EventEmitter = new EventEmitter();
@Output() onRightNav: EventEmitter = new EventEmitter();
- @Output() onLeftSecondaryNav: EventEmitter = new EventEmitter();
- @Output() onRightSecondaryNav: EventEmitter = new EventEmitter();
isInited: boolean = false;
componentConfig: IMonthCalendarConfigInternal;
yearMonths: IMonth[][];
@@ -228,7 +226,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
}
onLeftSecondaryNavClick(): void {
- let navigateBy = this.componentConfig.multipleYearsNavigateBy;
+ let navigateBy = this.componentConfig.secondaryNavigationStepMonthView;
const isOutsideRange = this.componentConfig.min &&
this.currentDateView.year() - this.componentConfig.min.year() < navigateBy;
@@ -239,7 +237,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
const from = this.currentDateView.clone();
this.currentDateView = this.currentDateView.clone().subtract(navigateBy, 'year');
const to = this.currentDateView.clone();
- this.onLeftSecondaryNav.emit({from, to});
+ this.onLeftNav.emit({from, to});
}
onRightNavClick(): void {
@@ -250,7 +248,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
}
onRightSecondaryNavClick(): void {
- let navigateBy = this.componentConfig.multipleYearsNavigateBy;
+ let navigateBy = this.componentConfig.secondaryNavigationStepMonthView;
const isOutsideRange = this.componentConfig.max &&
this.componentConfig.max.year() - this.currentDateView.year() < navigateBy;
@@ -261,7 +259,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
const from = this.currentDateView.clone();
this.currentDateView = this.currentDateView.clone().add(navigateBy, 'year');
const to = this.currentDateView.clone();
- this.onRightSecondaryNav.emit({from, to});
+ this.onRightNav.emit({from, to});
}
toggleCalendarMode(): void {
diff --git a/src/lib/month-calendar/month-calendar.service.ts b/src/lib/month-calendar/month-calendar.service.ts
index ecf15fc9..04b07fbe 100644
--- a/src/lib/month-calendar/month-calendar.service.ts
+++ b/src/lib/month-calendar/month-calendar.service.ts
@@ -16,8 +16,8 @@ export class MonthCalendarService {
isNavHeaderBtnClickable: false,
monthBtnFormat: 'MMM',
locale: moment.locale(),
- multipleYearsNavigateBy: 10,
- showMultipleYearsNavigation: false,
+ showSecondaryNavigationMonthView: false,
+ secondaryNavigationStepMonthView: 10,
unSelectOnClick: true,
numOfMonthRows: 3
};
@@ -34,6 +34,7 @@ export class MonthCalendarService {
this.validateConfig(_config);
this.utilsService.convertPropsToMoment(_config, _config.format, ['min', 'max']);
+ this.utilsService.handleDeprecatedParameters(_config);
moment.locale(_config.locale);
return _config;