feat(daterangepicker): add ability to show prev and current month ins…

…tead of current and next one (#5513) Co-authored-by: Vitaliy Makogon <mvitaliyd@gmail.com>
valor-software · Jan 9, 2020 · cb6b29e · cb6b29e
1 parent e1d2f75
commit cb6b29e
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 3 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -40,6 +40,7 @@ import {
   NgApiDocComponent,
   NgApiDocConfigComponent
 } from '../../docs/api-docs';
+import { DemoDateRangePickerShowPreviousMonth } from './demos/daterangepicker-show-previous-month/show-previous-month';
 
 
 export const demoComponentContent: ContentSection[] = [
@@ -346,6 +347,15 @@ export const demoComponentContent: ContentSection[] = [
         style: require('!!raw-loader!./demos/date-custom-classes/date-custom-classes.scss'),
         description: `<p>Style dates with custom classes</p>`,
         outlet: DemoDatepickerDateCustomClassesComponent
+      },
+      {
+        title: 'Previous month in Daterangepicker',
+        anchor: 'daterangepicker-previous-month',
+        component: require('!!raw-loader!./demos/daterangepicker-show-previous-month/show-previous-month.ts'),
+        html: require('!!raw-loader!./demos/daterangepicker-show-previous-month/show-previous-month.html'),
+        description: `<p>Pick previous & current month instead of current & next month.When daterange selected and related to current month,
+        daterangepicker will works by default, with current & next month</p>`,
+        outlet: DemoDateRangePickerShowPreviousMonth
       }
     ]
   },

diff --git a/...components/+datepicker/demos/daterangepicker-show-previous-month/show-previous-month.html b/...components/+datepicker/demos/daterangepicker-show-previous-month/show-previous-month.html
@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker
+           [bsConfig]="{ showPreviousMonth: true }">
+  </div>
+</div>
diff --git a/...p/components/+datepicker/demos/daterangepicker-show-previous-month/show-previous-month.ts b/...p/components/+datepicker/demos/daterangepicker-show-previous-month/show-previous-month.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-daterangepicker-show-previous-month',
+  templateUrl: './show-previous-month.html'
+})
+export class DemoDateRangePickerShowPreviousMonth {}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -32,6 +32,7 @@ import { DemoDatepickerTriggersCustomComponent } from './triggers-custom/trigger
 import { DemoDatepickerTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoDatepickerValueChangeEventComponent } from './value-change-event/value-change-event';
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
+import { DemoDateRangePickerShowPreviousMonth } from './daterangepicker-show-previous-month/show-previous-month';
 
 
 export const DEMO_COMPONENTS = [
@@ -66,5 +67,6 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerTriggersCustomComponent,
   DemoDatepickerTriggersManualComponent,
   DemoDatepickerValueChangeEventComponent,
+  DemoDateRangePickerShowPreviousMonth,
   DemoDatePickerVisibilityEventsComponent
 ];
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -1025,6 +1025,11 @@ export const ngdoc: any = {
         "type": "BsDatepickerViewMode",
         "description": "<p>Default mode for all date pickers</p>\n"
       },
+      {
+        "name": "showPreviousMonth",
+        "type": "boolean",
+        "description": "<p>Shows previous and current month, instead of current and next (daterangepicker only</p>\n"
+      },
       {
         "name": "rangeInputFormat",
         "defaultValue": "L",

diff --git a/docs/getting-started/ng-cli.md b/docs/getting-started/ng-cli.md
@@ -15,9 +15,9 @@ ng serve
 
 -   Install `ngx-bootstrap` and `bootstrap`
 
-    ```bash
+ ```bash
       npm install ngx-bootstrap bootstrap --save
-    ```
+ ```
 
 -   Open `src/app/app.module.ts` and add:
 

diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
@@ -45,10 +45,15 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
   selectFromOtherMonth?: boolean;
 
   /**
-   * Makes dates from other months active
+   * Allows select first date of the week by click on week number
    */
   selectWeek?: boolean;
 
+  /**
+   * Shows previous and current month, instead of current and next (dateRangePicker only)
+   */
+  showPreviousMonth?: boolean;
+
   /**
    * Add class to current day
    */

diff --git a/src/datepicker/reducer/bs-datepicker.reducer.ts b/src/datepicker/reducer/bs-datepicker.reducer.ts
@@ -166,6 +166,10 @@ function calculateReducer(state: BsDatepickerState): BsDatepickerState {
   let viewDate = state.view.date;
 
   if (state.view.mode === 'day') {
+    if (state.showPreviousMonth && state.selectedRange.length === 0) {
+      viewDate = shiftDate(viewDate, { month: -1 });
+    }
+
     state.monthViewOptions.firstDayOfWeek = getLocale(state.locale).firstDayOfWeek();
     const monthsModel = new Array(displayMonths);
     for (let monthIndex = 0; monthIndex < displayMonths; monthIndex++) {

diff --git a/src/datepicker/reducer/bs-datepicker.state.ts b/src/datepicker/reducer/bs-datepicker.state.ts
@@ -45,6 +45,7 @@ export class BsDatepickerState
   formattedMonths?: DaysCalendarViewModel[];
   flaggedMonths?: DaysCalendarViewModel[];
   selectFromOtherMonth?: boolean;
+  showPreviousMonth?: boolean; // dateRangePicker only;
 
   // months calendar
   monthsCalendar?: MonthsCalendarViewModel[];