feat(datepicker): allow to select dates from other months (#4828)

closes #4485
closes #3746

demo/src/app/components/+datepicker/datepicker-section.list.ts

@@ -19,7 +19,7 @@ import { DemoDatePickerVisibilityEventsComponent } from './demos/visibility-even
 import { DemoDatepickerValueChangeEventComponent } from './demos/value-change-event/value-change-event';
 import { DemoDatepickerTriggersCustomComponent } from './demos/triggers-custom/triggers-custom';
 import { DemoDatepickerHideOnScrollComponent } from './demos/hide-on-scroll/hide-on-scroll';
-
+import { DemoDatePickerSelectDatesFromOtherMonthsComponent } from './demos/select-dates-from-other-months/select-dates-from-other-months';
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
@@ -232,6 +232,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>You can configure the datepicker via its <code>bsConfig</code> option</p>`,
         outlet: DemoDatePickerConfigObjectComponent
       },
+      {
+        title: 'Select dates from other month',
+        anchor: 'select-dates-from-other-month',
+        component: require('!!raw-loader?lang=typescript!./demos/select-dates-from-other-months/select-dates-from-other-months.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/select-dates-from-other-months/select-dates-from-other-months.html'),
+        description: `<p>You can enable dates from other months via <code>selectFromOtherMonth</code> option in <code>bsConfig</code></p>`,
+        outlet: DemoDatePickerSelectDatesFromOtherMonthsComponent
+      },
       {
         title: 'Outside click',
         anchor: 'outside-click',

demo/src/app/components/+datepicker/demos/index.ts

@@ -15,6 +15,7 @@ import { DemoDatepickerConfigMethodComponent } from './config-method/config-meth
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
 import { DemoDatepickerValueChangeEventComponent } from './value-change-event/value-change-event';
 import { DemoDatePickerConfigObjectComponent } from './config-object/config-object';
+import { DemoDatePickerSelectDatesFromOtherMonthsComponent } from './select-dates-from-other-months/select-dates-from-other-months';
 import { DemoDatepickerOutsideClickComponent } from './outside-click/outside-click';
 import { DemoDatepickerByIsOpenPropComponent } from './trigger-by-isopen-property/trigger-by-isopen-property';
 import { DemoDatepickerDateInitialStateComponent } from './date-initial-state/date-initial-state';
@@ -40,6 +41,7 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerPlacementComponent,
   DemoDatepickerValueChangeEventComponent,
   DemoDatePickerConfigObjectComponent,
+  DemoDatePickerSelectDatesFromOtherMonthsComponent,
   DemoDatepickerOutsideClickComponent,
   DemoDatepickerByIsOpenPropComponent,
   DemoDatepickerDateInitialStateComponent,

demo/src/app/components/+datepicker/demos/select-dates-from-other-months/select-dates-from-other-months.html

+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input
+      class="form-control"
+      placeholder="Datepicker"
+      bsDatepicker
+      [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  selectFromOtherMonth: true}">
+  </div>
+</div>

demo/src/app/components/+datepicker/demos/select-dates-from-other-months/select-dates-from-other-months.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-select-dates-from-other-months',
+  templateUrl: './select-dates-from-other-months.html'
+})
+export class DemoDatePickerSelectDatesFromOtherMonthsComponent {}

demo/src/ng-api-doc.ts

@@ -816,6 +816,12 @@ export const ngdoc: any = {
         "defaultValue": "true",
         "type": "boolean",
         "description": "<p>Allows to hide week numbers in datepicker</p>\n"
+      },
+      {
+        "name": "selectFromOtherMonth",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>Allows to use dates from previous/future month as active</p>\n"
       }
     ]
   },

src/chronos/i18n/pl.ts

@@ -80,6 +80,9 @@ export const plLocale: LocaleData = {
         case 3:
           return '[W środę o] LT';
 
+        case 5:
+          return '[W piątek o] LT';
+
         case 6:
           return '[W sobotę o] LT';
 
@@ -94,6 +97,10 @@ export const plLocale: LocaleData = {
           return '[W zeszłą niedzielę o] LT';
         case 3:
           return '[W zeszłą środę o] LT';
+        case 4:
+          return '[W zeszłą czwartek o] LT';
+        case 5:
+          return '[W zeszłą piątek o] LT';
         case 6:
           return '[W zeszłą sobotę o] LT';
         default:

src/chronos/test/locale/pl.spec.ts

@@ -228,6 +228,9 @@ describe('locale: pl', () => {
         case 3:
           return '[W środę o] LT';
 
+        case 5:
+          return '[W piątek o] LT';
+
         case 6:
           return '[W sobotę o] LT';
 
@@ -257,6 +260,10 @@ describe('locale: pl', () => {
           return '[W zeszłą niedzielę o] LT';
         case 3:
           return '[W zeszłą środę o] LT';
+        case 4:
+          return '[W zeszłą czwartek o] LT';
+        case 5:
+          return '[W zeszłą piątek o] LT';
         case 6:
           return '[W zeszłą sobotę o] LT';
         default:

src/datepicker/base/bs-datepicker-container.ts

@@ -17,6 +17,7 @@ import {
 
 export abstract class BsDatepickerAbstractComponent {
   containerClass: string;
+  isOtherMonthsActive: boolean;
 
   _effects: BsDatepickerEffects;
   _customRangesFish: BsCustomDates[] = [];

src/datepicker/bs-datepicker.config.ts

@@ -22,6 +22,11 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    */
   maxDate?: Date;
 
+  /**
+   * Makes dates from other months active
+   */
+  selectFromOtherMonth?: boolean;
+
   /**
    * Defaut mode for all date pickers
    */

src/datepicker/bs-datepicker.scss

@@ -163,6 +163,13 @@
           transition: 0s;
         }
 
+        &.is-active-other-month:not(.disabled):not(.selected) span,
+        span.is-active-other-month:not(.disabled):not(.selected) {
+          background-color: $highlighted;
+          transition: 0s;
+          cursor: pointer !important;
+        }
+
         span.disabled,
         &.disabled span {
           color: $font-color-02;
@@ -432,6 +439,7 @@
   /* .is-other-month */
   .is-other-month {
     color: rgba(0, 0, 0, 0.25);
+    cursor: default !important;
   }
 
   /* .bs-datepicker-buttons */

src/datepicker/models/index.ts

@@ -23,6 +23,7 @@ export interface CalendarCellViewModel {
 /** *************** */
 // days matrix: day cell view model
 export interface DayViewModel extends CalendarCellViewModel {
+  isOtherMonthHovered?: boolean;
   isOtherMonth?: boolean;
   isInRange?: boolean;
   isSelectionStart?: boolean;

src/datepicker/reducer/bs-datepicker.state.ts

@@ -55,6 +55,7 @@ export class BsDatepickerState
   // DatepickerRenderOptions
   showWeekNumbers?: boolean;
   displayMonths?: number;
+  selectFromOtherMonth?: boolean;
 
   // DatepickerFormatOptions
   locale: string;

src/datepicker/themes/bs/bs-datepicker-container.component.ts

@@ -38,6 +38,7 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
   }
 
   ngOnInit(): void {
+    this.isOtherMonthsActive = this._config.selectFromOtherMonth;
     this.containerClass = this._config.containerClass;
     this._effects
       .init(this._store)
@@ -61,9 +62,12 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
   }
 
   daySelectHandler(day: DayViewModel): void {
-    if (day.isOtherMonth || day.isDisabled) {
+    const isDisabled = this.isOtherMonthsActive ? day.isDisabled : (day.isOtherMonth || day.isDisabled);
+
+    if (isDisabled) {
       return;
     }
+
     this._store.dispatch(this._actions.select(day.date));
   }
 

src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts

@@ -8,6 +8,7 @@ import { DayViewModel } from '../../models';
     '[class.disabled]': 'day.isDisabled',
     '[class.is-highlighted]': 'day.isHovered',
     '[class.is-other-month]': 'day.isOtherMonth',
+    '[class.is-active-other-month]': 'day.isOtherMonthHovered',
     '[class.in-range]': 'day.isInRange',
     '[class.select-start]': 'day.isSelectionStart',
     '[class.select-end]': 'day.isSelectionEnd',

src/datepicker/themes/bs/bs-daterangepicker-container.component.ts

@@ -40,6 +40,7 @@ export class BsDaterangepickerContainerComponent extends BsDatepickerAbstractCom
 
   ngOnInit(): void {
     this.containerClass = this._config.containerClass;
+    this.isOtherMonthsActive = this._config.selectFromOtherMonth;
     this._effects
       .init(this._store)
       // intial state options
@@ -61,7 +62,9 @@ export class BsDaterangepickerContainerComponent extends BsDatepickerAbstractCom
   }
 
   daySelectHandler(day: DayViewModel): void {
-    if (day.isOtherMonth || day.isDisabled) {
+    const isDisabled = this.isOtherMonthsActive ? day.isDisabled : (day.isOtherMonth || day.isDisabled);
+
+    if (isDisabled) {
       return;
     }
 

src/datepicker/themes/bs/bs-days-calendar-view.component.ts

@@ -13,6 +13,7 @@ import {
   DaysCalendarViewModel,
   DayViewModel
 } from '../../models';
+import { BsDatepickerConfig } from '../../bs-datepicker.config';
 
 @Component({
   selector: 'bs-days-calendar-view',
@@ -65,6 +66,8 @@ export class BsDaysCalendarViewComponent {
   @Output() onSelect = new EventEmitter<DayViewModel>();
   @Output() onHover = new EventEmitter<CellHoverEvent>();
 
+  constructor(private _config: BsDatepickerConfig) { }
+
   navigateTo(event: BsNavigationDirection): void {
     const step = BsNavigationDirection.DOWN === event ? -1 : 1;
     this.onNavigate.emit({ step: { month: step } });
@@ -79,6 +82,10 @@ export class BsDaysCalendarViewComponent {
   }
 
   hoverDay(cell: DayViewModel, isHovered: boolean): void {
+    if (this._config.selectFromOtherMonth && cell.isOtherMonth) {
+      cell.isOtherMonthHovered = isHovered;
+    }
+
     this.onHover.emit({ cell, isHovered });
   }
 }