feat(datepicker): add ability to show one month for daterangepicker d…

…epend on max/min date value (#5667) * feat(datepicker): add ability to show one month for daterangepicker, depends on max/min date value * fix(tests): change moment.js format for the Datepicker tests * fix(code): delete space * fix(docs): fix format issue in doc Co-authored-by: dmitry-zhemchugov <44227371+dmitry-zhemchugov@users.noreply.github.com>
valor-software · Mar 2, 2020 · b405057 · b405057
1 parent d785e71
commit b405057
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 8 deletions.
diff --git a/cypress/support/datepicker.po.ts b/cypress/support/datepicker.po.ts
@@ -110,7 +110,7 @@ export class DatepickerPo extends BaseComponent {
   }
 
   isQuickSelectLastDaysApplied(datepicker: string, countOfBtn: number, baseSelector = 'body') {
-    const todayDate = Cypress.moment().format('l');
+    const todayDate = Cypress.moment().format('L');
     const previousDate = Cypress.moment().subtract(7, 'days').calendar();
     const nextDate = Cypress.moment().add(7, 'days').calendar();
 

diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -45,6 +45,7 @@ import {
 import { DemoDatePickerQuickSelectRangesComponent } from './demos/quick-select-ranges/quick-select-ranges';
 import { DemoDateRangePickerShowPreviousMonth } from './demos/daterangepicker-show-previous-month/show-previous-month';
 import { DemoDatePickerSelectWeekRangeComponent } from './demos/select-week-range/select-week-range';
+import { DemoDateRangePickerDisplayOneMonth } from './demos/daterangepicker-display-one-month/display-one-month';
 
 
 export const demoComponentContent: ContentSection[] = [
@@ -221,6 +222,15 @@ export const demoComponentContent: ContentSection[] = [
           <p>NOTE: DO NOT USE this functionality with <code>datesDisabled</code> at the same time</p>`,
         outlet: DemoDatepickerDatesEnabledComponent
       },
+      {
+        title: 'Display one month',
+        anchor: 'display-one-month',
+        component: require('!!raw-loader!./demos/daterangepicker-display-one-month/display-one-month.ts'),
+        html: require('!!raw-loader!./demos/daterangepicker-display-one-month/display-one-month.html'),
+        description: `<p>You can configure, how many months  you want to show for daterangepicker via <code>displayMonths</code> in <code>BsDaterangepickerConfig.</code></p>
+        <p>With <code>displayOneMonthRange</code> you can show only one month for two cases</p>`,
+        outlet: DemoDateRangePickerDisplayOneMonth
+      },
       {
         title: 'Min-mode',
         anchor: 'min-mode',

diff --git a/...app/components/+datepicker/demos/daterangepicker-display-one-month/display-one-month.html b/...app/components/+datepicker/demos/daterangepicker-display-one-month/display-one-month.html
@@ -0,0 +1,21 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-sm-6 col-md-6 form-group">
+    <p><code>maxDate</code> is today</p>
+    <input class="form-control"
+           placeholder="Daterangepicker"
+           ngModel
+           bsDaterangepicker
+           [maxDate]="today"
+           [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  displayOneMonthRange: true }">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-6 col-md-6 form-group">
+   <p><code>minDate</code> month is equal to <code>maxDate</code> month</p>
+    <input class="form-control"
+           placeholder="Daterangepicker"
+           ngModel
+           bsDaterangepicker
+           [minDate]="minDate"
+           [maxDate]="maxDate"
+           [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  displayOneMonthRange: true }">
+  </div>
+</div>
diff --git a/...c/app/components/+datepicker/demos/daterangepicker-display-one-month/display-one-month.ts b/...c/app/components/+datepicker/demos/daterangepicker-display-one-month/display-one-month.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-daterangepicker-display-one-month',
+  templateUrl: './display-one-month.html'
+})
+export class DemoDateRangePickerDisplayOneMonth {
+  today: Date;
+  maxDate: Date;
+  minDate: Date;
+
+  constructor() {
+    this.today = new Date();
+    this.minDate = new Date(this.today.getFullYear(), this.today.getMonth(), 2);
+    this.maxDate = new Date(this.today.getFullYear(), this.today.getMonth(), 25);
+  }
+}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -36,6 +36,7 @@ import { DemoDatepickerValueChangeEventComponent } from './value-change-event/va
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
 import { DemoDatePickerQuickSelectRangesComponent } from './quick-select-ranges/quick-select-ranges';
 import { DemoDateRangePickerShowPreviousMonth } from './daterangepicker-show-previous-month/show-previous-month';
+import { DemoDateRangePickerDisplayOneMonth } from './daterangepicker-display-one-month/display-one-month';
 
 
 export const DEMO_COMPONENTS = [
@@ -72,7 +73,8 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerTriggersCustomComponent,
   DemoDatepickerTriggersManualComponent,
   DemoDatepickerValueChangeEventComponent,
+  DemoDateRangePickerShowPreviousMonth,
+  DemoDateRangePickerDisplayOneMonth,
   DemoDatePickerVisibilityEventsComponent,
-  DemoDatePickerQuickSelectRangesComponent,
-  DemoDateRangePickerShowPreviousMonth
+  DemoDatePickerQuickSelectRangesComponent
 ];
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -1030,6 +1030,11 @@ export const ngdoc: any = {
         "type": "number[]",
         "description": "<p>Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays</p>\n"
       },
+      {
+        "name": "displayOneMonthRange",
+        "type": "boolean",
+        "description": "<p>Show one months for special cases (only for dateRangePicker)</p>\n<ol>\n<li>maxDate is equal to today&#39;s date</li>\n<li>minDate&#39;s month is equal to maxDate&#39;s month</li>\n</ol>\n"
+      },
       {
         "name": "isAnimated",
         "defaultValue": "false",

diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
@@ -41,6 +41,12 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Disable specific dates
    */
   datesDisabled?: Date[];
+  /**
+   * Show one months for special cases (only for dateRangePicker)
+   * 1. maxDate is equal to today's date
+   * 2. minDate's month is equal to maxDate's month
+   */
+  displayOneMonthRange?: boolean;
   /**
    * Enable specific dates
    */

diff --git a/src/datepicker/reducer/bs-datepicker.reducer.ts b/src/datepicker/reducer/bs-datepicker.reducer.ts
@@ -13,7 +13,8 @@ import {
   startOf,
   getLocale,
   isAfter,
-  isBefore
+  isBefore,
+  isSame
 } from 'ngx-bootstrap/chronos';
 import { canSwitchMode } from '../engine/view-mode';
 import { formatMonthsCalendar } from '../engine/format-months-calendar';
@@ -161,7 +162,9 @@ export function bsDatepickerReducer(state = initialDatepickerState,
 
 function calculateReducer(state: BsDatepickerState): BsDatepickerState {
   // how many calendars
-  const displayMonths = state.displayMonths;
+  const displayMonths = (state.displayOneMonthRange &&
+    isDisplayOneMonth(state.view.date, state.minDate, state.maxDate)) ? 1 : state.displayMonths;
+
   // use selected date on initial rendering if set
   let viewDate = state.view.date;
 
@@ -282,6 +285,7 @@ function formatReducer(state: BsDatepickerState,
 
 function flagReducer(state: BsDatepickerState,
                      action: Action): BsDatepickerState {
+  const displayMonths = isDisplayOneMonth(state.view.date, state.minDate, state.maxDate) ? 1 : state.displayMonths;
   if (state.view.mode === 'day') {
     const flaggedMonths = state.formattedMonths.map(
       (formattedMonth, monthIndex) =>
@@ -295,7 +299,7 @@ function flagReducer(state: BsDatepickerState,
           hoveredDate: state.hoveredDate,
           selectedDate: state.selectedDate,
           selectedRange: state.selectedRange,
-          displayMonths: state.displayMonths,
+          displayMonths,
           dateCustomClasses: state.dateCustomClasses,
           monthIndex
         })
@@ -313,7 +317,7 @@ function flagReducer(state: BsDatepickerState,
           maxDate: state.maxDate,
           hoveredMonth: state.hoveredMonth,
           selectedDate: state.selectedDate,
-          displayMonths: state.displayMonths,
+          displayMonths,
           monthIndex
         })
     );
@@ -330,7 +334,7 @@ function flagReducer(state: BsDatepickerState,
           maxDate: state.maxDate,
           hoveredYear: state.hoveredYear,
           selectedDate: state.selectedDate,
-          displayMonths: state.displayMonths,
+          displayMonths,
           yearIndex
         })
     );
@@ -397,3 +401,15 @@ function getViewDate(viewDate: Date | Date[], minDate: Date, maxDate: Date) {
 
   return _date;
 }
+
+function isDisplayOneMonth(viewDate: Date, minDate: Date, maxDate: Date) {
+  if (maxDate && isSame(maxDate, viewDate, 'day')) {
+    return true;
+  }
+
+  if (minDate && maxDate &&  minDate.getMonth() === maxDate.getMonth()) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/src/datepicker/reducer/bs-datepicker.state.ts b/src/datepicker/reducer/bs-datepicker.state.ts
@@ -47,6 +47,7 @@ export class BsDatepickerState
   flaggedMonths?: DaysCalendarViewModel[];
   selectFromOtherMonth?: boolean;
   showPreviousMonth?: boolean; // dateRangePicker only;
+  displayOneMonthRange?: boolean; // dateRangePicker only;
 
   // months calendar
   monthsCalendar?: MonthsCalendarViewModel[];