[Feature Request] making double arrows available in day view

e2e/app.po.ts

@@ -38,11 +38,13 @@ export class DemoPage {
   weekNumbers = $$(`${this.popupSelector} .dp-week-number`);
   dayCalendarNavHeaderBtn = $(`${this.popupSelector} .dp-nav-header-btn`);
   deyCalendarMonthNavHeader = $(`${this.popupSelector} dp-month-calendar .dp-nav-header`);
-  dayTimeCalendarNavHeaderBtnInline = $(`dp-day-time-calendar .dp-nav-header-btn`);
-  dayCalendarNavHeaderBtnInline = $(`dp-day-calendar .dp-nav-header-btn`);
-  monthCalendarNavHeaderInline = $(`dp-month-calendar .dp-nav-header`);
+  dayTimeCalendarNavHeaderBtnInline = $(`dp-day-time-calendar#picker .dp-nav-header-btn`);
+  dayCalendarNavHeaderBtnInline = $(`dp-day-calendar#picker .dp-nav-header-btn`);
+  monthCalendarNavHeaderInline = $(`dp-month-calendar#picker .dp-nav-header`);
   navHeader = $(`${this.popupSelector} .dp-nav-header`);
+  dayCalendarNavMonthHeaderSpan = $(`${this.popupSelector} dp-month-calendar .dp-nav-header span`);
   dayCalendarNavMonthHeaderBtn = $(`${this.popupSelector} dp-month-calendar .dp-nav-header-btn`);
+  dayCalendarNavDayHeaderBtn = $(`${this.popupSelector} dp-day-calendar .dp-nav-header-btn`);
   calendarDisabledDays = $$(`${this.popupSelector} .dp-calendar-day[disabled]`);
   calendarFirstDayOfMonth = $$(`${this.popupSelector} .dp-current-month`).get(0);
   calendarFirstMonthOfYear = $$(`${this.popupSelector} dp-month-calendar .dp-calendar-month`).get(0);
@@ -93,8 +95,11 @@ export class DemoPage {
   showSeconds = $('#showSeconds');
   showTwentyFourHours = $('#showTwentyFourHours');
   timeSeparatorInput = $('#timeSeparator');
-  showMultipleYearsNavigation = $('#showMultipleYearsNavigation');
-  multipleYearsNavigateBy = $('#multipleYearsNavigateBy');
+  showSecondaryNavigationMonthView = $('#showSecondaryNavigationMonthView');
+  secondaryNavigationStepMonthView = $('#secondaryNavigationStepMonthView');
+  showSecondaryNavigationDayView = $('#showSecondaryNavigationDayView');
+  hideSecondaryNavigationDayView = $('#hideSecondaryNavigationDayView');
+  secondaryNavigationStepDayView = $('#secondaryNavigationStepDayView');
   hideInputRadio = $('#hideInputRadio');
 
   showOnOutsideClick = $('#showOnOutsideClick');
@@ -147,19 +152,19 @@ export class DemoPage {
   }
 
   clickOnDayButton(text: string) {
-    return element(by.cssContainingText(`${this.popupSelector} .dp-calendar-day`, text)).click();
+    return element(by.cssContainingText(`${this.popupSelector} .dp-calendar-day.dp-current-month`, text)).click();
   }
 
   clickOnDayButtonInline(text: string) {
-    return element(by.cssContainingText(`.dp-calendar-day`, text)).click();
+    return element(by.cssContainingText(`#picker .dp-calendar-day.dp-current-month`, text)).click();
   }
 
   clickOnMonthButton(text: string) {
     return element(by.cssContainingText(`${this.popupSelector} .dp-calendar-month`, text)).click();
   }
 
   clickOnMonthButtonInline(text: string) {
-    return element(by.cssContainingText(`.dp-calendar-month`, text)).click();
+    return element(by.cssContainingText(`#picker .dp-calendar-month`, text)).click();
   }
 
   waitUntilPresent(elem: ElementFinder) {

e2e/datepicker-e2e.spec.ts

@@ -291,23 +291,24 @@ describe('dpDayPicker dayPicker', () => {
     expect(await page.calendarFirstMonthOfYear.getText()).toEqual('1');
   });
 
-  it('should check showMultipleYearsNavigation is working', async () => {
-    await page.dayPickerMenu.click();
+  it('should check showSecondaryNavigationMonthView is working', async () => {
+    const currentTime = moment();
+    await page.monthPickerMenu.click();
     await page.dayPickerInput.click();
-    await page.dayCalendarNavHeaderBtn.click();
+
     expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
     expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
 
-    await page.showMultipleYearsNavigation.click();
-    await page.multipleYearsNavigateBy.clear();
-    await page.multipleYearsNavigateBy.sendKeys('20');
+    await page.showSecondaryNavigationMonthView.click();
+    await page.secondaryNavigationStepMonthView.clear();
+    await page.secondaryNavigationStepMonthView.sendKeys('20');
     await page.dayPickerInput.click();
-    await page.dayCalendarNavHeaderBtn.click();
     await page.dayCalendarLeftSecondaryNavBtn.click();
-    expect(await page.dayCalendarNavMonthHeaderBtn.getText()).toEqual(moment().subtract(20, 'year').format('YYYY'));
+
+    expect(await page.dayCalendarNavMonthHeaderSpan.getText()).toEqual(currentTime.clone().subtract(20, 'year').format('YYYY'));
 
     await page.dayCalendarRightSecondaryNavBtn.click();
     await page.dayCalendarRightSecondaryNavBtn.click();
-    expect(await page.dayCalendarNavMonthHeaderBtn.getText()).toEqual(moment().add(20, 'year').format('YYYY'));
+    expect(await page.dayCalendarNavMonthHeaderSpan.getText()).toEqual(currentTime.clone().add(20, 'year').format('YYYY'));
   });
 });

e2e/daypicker-e2e.spec.ts

@@ -1,4 +1,5 @@
 import {DemoPage} from './app.po';
+import * as moment from 'moment';
 
 describe('dpDayPicker dayPicker', () => {
   let page: DemoPage;
@@ -55,4 +56,66 @@ describe('dpDayPicker dayPicker', () => {
     expect(await page.meridiemUpBtn.getAttribute('disabled')).toBe('true');
     expect(await page.meridiemDownBtn.getAttribute('disabled')).toBe('true');
   });
+
+  it('should check showSecondaryNavigationDayView and showSecondaryNavigationMonthView are working together', async () => {
+    const currentTime = moment();
+    await page.dayPickerMenu.click();
+    await page.dayPickerInput.click();
+
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+    await page.dayCalendarNavHeaderBtn.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+    await page.dayCalendarNavHeaderBtn.click();
+
+    await page.scrollIntoView(await page.showSecondaryNavigationDayView);
+    await page.showSecondaryNavigationDayView.click();
+    await page.secondaryNavigationStepDayView.clear();
+    await page.secondaryNavigationStepDayView.sendKeys('20');
+    await page.dayPickerInput.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(true);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(true);
+    await page.dayCalendarLeftSecondaryNavBtn.click();
+    expect(await page.dayCalendarNavDayHeaderBtn.getText()).toEqual(currentTime.clone().subtract(20, 'month').format('MMM, YYYY'));
+    await page.dayCalendarRightSecondaryNavBtn.click();
+    await page.dayCalendarRightSecondaryNavBtn.click();
+    expect(await page.dayCalendarNavDayHeaderBtn.getText()).toEqual(currentTime.clone().add(20, 'month').format('MMM, YYYY'));
+
+    await page.dayCalendarNavHeaderBtn.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+    await page.dayCalendarNavHeaderBtn.click();
+    await page.clickOnBody();
+
+
+    await page.scrollIntoView(await page.showSecondaryNavigationMonthView);
+    await page.showSecondaryNavigationMonthView.click();
+    await page.dayPickerInput.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(true);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(true);
+    await page.dayCalendarNavHeaderBtn.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(true);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(true);
+    await page.dayCalendarNavHeaderBtn.click();
+    await page.clickOnBody();
+
+    await page.setInputValue(page.daytimePickerInput, currentTime.format('DD-MM-YYYY'));
+    await page.scrollIntoView(await page.hideSecondaryNavigationDayView);
+    await page.hideSecondaryNavigationDayView.click();
+    await page.secondaryNavigationStepMonthView.clear();
+    await page.secondaryNavigationStepMonthView.sendKeys('25');
+    await page.dayPickerInput.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+    await page.dayCalendarNavHeaderBtn.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(true);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(true);
+    await page.dayCalendarLeftSecondaryNavBtn.click();
+    expect(await page.dayCalendarNavDayHeaderBtn.getText()).toEqual(currentTime.clone().subtract(25, 'year').format('YYYY'));
+    await page.dayCalendarRightSecondaryNavBtn.click();
+    await page.dayCalendarRightSecondaryNavBtn.click();
+    expect(await page.dayCalendarNavDayHeaderBtn.getText()).toEqual(currentTime.clone().add(25, 'year').format('YYYY'));
+    await page.dayCalendarNavHeaderBtn.click();
+  });
 });

e2e/daytimepicker-e2e.spec.ts

@@ -1,4 +1,5 @@
 import {DemoPage} from './app.po';
+import * as moment from 'moment';
 
 describe('dpDayPicker daytimePicker', () => {
   let page: DemoPage;
@@ -63,4 +64,32 @@ describe('dpDayPicker daytimePicker', () => {
 
     expect(await page.selectedDays.count()).toEqual(0);
   });
+
+  it('should check showSecondaryNavigationDayView is working', async () => {
+    const currentTime = moment();
+    await page.daytimePickerInput.click();
+
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+    await page.dayCalendarNavHeaderBtn.click();
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+    await page.dayCalendarNavHeaderBtn.click();
+
+    await page.showSecondaryNavigationDayView.click();
+    await page.secondaryNavigationStepDayView.clear();
+    await page.secondaryNavigationStepDayView.sendKeys('20');
+    await page.daytimePickerInput.click();
+    await page.dayCalendarLeftSecondaryNavBtn.click();
+    expect(await page.dayCalendarNavDayHeaderBtn.getText()).toEqual(currentTime.clone().subtract(20, 'month').format('MMM, YYYY'));
+
+    await page.dayCalendarRightSecondaryNavBtn.click();
+    await page.dayCalendarRightSecondaryNavBtn.click();
+    expect(await page.dayCalendarNavDayHeaderBtn.getText()).toEqual(currentTime.clone().add(20, 'month').format('MMM, YYYY'));
+
+    await page.dayCalendarNavHeaderBtn.click();
+
+    expect(await page.dayCalendarLeftSecondaryNavBtn.isPresent()).toBe(false);
+    expect(await page.dayCalendarRightSecondaryNavBtn.isPresent()).toBe(false);
+  });
 });

package.json

@@ -13,6 +13,7 @@
     "e2e": "ng e2e --port 3200",
     "e2e:quick": "ng e2e --dev-server-target --webdriverUpdate=false",
     "e2e:headless": "HEADLESS=true ng e2e",
+    "e2e:headless-win": "set HEADLESS=true&& ng e2e --port 3200",
     "build:index": "cd build-helpers && node index-maker.js",
     "build:demo": "rm -rf dist/ && ng build --prod --base-href /angular-datepicker/ && npm run build:index",
     "build:prod": "ng-packagr -p package.json",

src/demo/demo/common/conts/consts.ts

@@ -31,8 +31,10 @@ export const DEF_CONF: IDatePickerConfig = {
   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,

src/demo/demo/config-form/config-form.component.html

@@ -753,35 +753,67 @@ <h3 class="dp-options-section">Config options</h3>
       </div>
     </div>
 
-    <div *ngIf="isValidConfig('showMultipleYearsNavigation')" class="dp-option">
+    <div *ngIf="isValidConfig('showSecondaryNavigationMonthView')" class="dp-option">
         <span class="dp-option-header">
-          Show multiple years navigation buttons (showMultipleYearsNavigation):
+          Show multiple years navigation buttons in the month view (showSecondaryNavigationMonthView):
         </span>
       <div class="dp-option-playground">
         <label>Enabled
-          <input id="showMultipleYearsNavigation"
-                 [formControl]="showMultipleYearsNavigation"
+          <input id="showSecondaryNavigationMonthView"
+                 [formControl]="showSecondaryNavigationMonthView"
                  [value]="true"
-                 name="showMultipleYearsNavigation"
+                 name="showSecondaryNavigationMonthView"
                  type="radio">
         </label>
         <label>Disabled
-          <input id="hideMultipleYearsNavigation"
-                 [formControl]="showMultipleYearsNavigation"
+          <input id="hideSecondaryNavigationMonthView"
+                 [formControl]="showSecondaryNavigationMonthView"
                  [value]="false"
-                 name="showMultipleYearsNavigation"
+                 name="showSecondaryNavigationMonthView"
                  type="radio">
         </label>
       </div>
     </div>
 
-    <div *ngIf="isValidConfig('showMultipleYearsNavigation')" class="dp-option">
+    <div *ngIf="isValidConfig('showSecondaryNavigationMonthView')" class="dp-option">
         <span class="dp-option-header">
-          Multiple years navigate by (multipleYearsNavigateBy):
+          Number of years to navigate using the secondary navigation button (secondaryNavigationStepMonthView):
         </span>
       <div class="dp-option-playground">
-        <input id="multipleYearsNavigateBy"
-               [formControl]="multipleYearsNavigateBy">
+        <input id="secondaryNavigationStepMonthView"
+               [formControl]="secondaryNavigationStepMonthView">
+      </div>
+    </div>
+
+    <div *ngIf="isValidConfig('showSecondaryNavigationDayView')" class="dp-option">
+        <span class="dp-option-header">
+          Show multiple months navigation buttons in the day view (showSecondaryNavigationDayView):
+        </span>
+      <div class="dp-option-playground">
+        <label>Enabled
+          <input id="showSecondaryNavigationDayView"
+                 [formControl]="showSecondaryNavigationDayView"
+                 [value]="true"
+                 name="showSecondaryNavigationDayView"
+                 type="radio">
+        </label>
+        <label>Disabled
+          <input id="hideSecondaryNavigationDayView"
+                 [formControl]="showSecondaryNavigationDayView"
+                 [value]="false"
+                 name="showSecondaryNavigationDayView"
+                 type="radio">
+        </label>
+      </div>
+    </div>
+
+    <div *ngIf="isValidConfig('showSecondaryNavigationDayView')" class="dp-option">
+        <span class="dp-option-header">
+          Number of month to navigate using the secondary navigation button (secondaryNavigationStepDayView):
+        </span>
+      <div class="dp-option-playground">
+        <input id="secondaryNavigationStepDayView"
+               [formControl]="secondaryNavigationStepDayView">
       </div>
     </div>
 

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
       });
     });
 

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 {