ngx-bootstrap 5.6.1 → 6.2.0

package/datepicker/fesm5/ngx-bootstrap-datepicker.js

@@ -1,14 +1,15 @@
-import { Injectable, EventEmitter, Component, Renderer2, ElementRef, Directive, ViewContainerRef, Input, Output, forwardRef, Host, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, ViewChild } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, Renderer2, ElementRef, Directive, ViewContainerRef, Input, Output, forwardRef, Host, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, ViewChild } from '@angular/core';
 import { __values, __spread, __extends } from 'tslib';
-import { filter, map, take, takeUntil } from 'rxjs/operators';
-import { getMonth, getFullYear, isFirstDayOfWeek, getDay, shiftDate, isBefore, endOf, isAfter, startOf, isArray, isSame, getFirstDayOfMonth, formatDate, getLocale, isSameMonth, isSameDay, isDisabledDay, isSameYear, isDateValid, setFullDate, isDate, parseDate, utcAsLocal } from 'ngx-bootstrap/chronos';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { MiniState, MiniStore } from 'ngx-bootstrap/mini-ngrx';
+import { filter, map, take, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import { isFirstDayOfWeek, getDay, shiftDate, isBefore, endOf, isAfter, startOf, isArray, isSame, getFirstDayOfMonth, formatDate, getLocale, isSameMonth, isSameDay, isDisabledDay, isSameYear, isDateValid, setFullDate, getMonth, getFullYear, isDate, parseDate, utcAsLocal } from 'ngx-bootstrap/chronos';
 import { PositioningService } from 'ngx-bootstrap/positioning';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { MiniState, MiniStore } from 'ngx-bootstrap/mini-ngrx';
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { isBs3 } from 'ngx-bootstrap/utils';
 
 /**
@@ -33,6 +34,10 @@ var BsDatepickerConfig = /** @class */ (function () {
          * turn on/off animation
          */
         this.isAnimated = false;
+        /**
+         * The view that the datepicker should start in
+         */
+        this.startView = 'day';
         /**
          * If true, returns focus to the datepicker / daterangepicker input after date selection
          */
@@ -62,10 +67,41 @@ var BsDatepickerConfig = /** @class */ (function () {
         this.monthLabel = 'MMMM';
         this.yearLabel = 'YYYY';
         this.weekNumbers = 'w';
+        /**
+         * Shows 'today' button
+         */
+        this.showTodayButton = false;
+        /**
+         * Shows clear button
+         */
+        this.showClearButton = false;
+        /**
+         * Positioning of 'today' button
+         */
+        this.todayPosition = 'center';
+        /**
+         * Positioning of 'clear' button
+         */
+        this.clearPosition = 'right';
+        /**
+         * Label for 'today' button
+         */
+        this.todayButtonLabel = 'Today';
+        /**
+         * Label for 'clear' button
+         */
+        this.clearButtonLabel = 'Clear';
+        /**
+         * Label for 'custom range' button
+         */
+        this.customRangeButtonLabel = 'Custom Range';
     }
     BsDatepickerConfig.decorators = [
-        { type: Injectable }
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
+    /** @nocollapse */ BsDatepickerConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDatepickerConfig_Factory() { return new BsDatepickerConfig(); }, token: BsDatepickerConfig, providedIn: "root" });
     return BsDatepickerConfig;
 }());
 if (false) {
@@ -98,11 +134,21 @@ if (false) {
      * @type {?}
      */
     BsDatepickerConfig.prototype.maxDate;
+    /**
+     * The view that the datepicker should start in
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.startView;
     /**
      * Default date custom classes for all date/range pickers
      * @type {?}
      */
     BsDatepickerConfig.prototype.dateCustomClasses;
+    /**
+     * Default tooltip text for all date/range pickers
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.dateTooltipTexts;
     /**
      * Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays
      * @type {?}
@@ -187,6 +233,11 @@ if (false) {
      * @type {?}
      */
     BsDatepickerConfig.prototype.ranges;
+    /**
+     * Max Date Range in days
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.maxDateRange;
     /** @type {?} */
     BsDatepickerConfig.prototype.monthTitle;
     /** @type {?} */
@@ -199,8 +250,64 @@ if (false) {
     BsDatepickerConfig.prototype.yearLabel;
     /** @type {?} */
     BsDatepickerConfig.prototype.weekNumbers;
+    /**
+     * Shows 'today' button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.showTodayButton;
+    /**
+     * Shows clear button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.showClearButton;
+    /**
+     * Positioning of 'today' button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.todayPosition;
+    /**
+     * Positioning of 'clear' button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.clearPosition;
+    /**
+     * Label for 'today' button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.todayButtonLabel;
+    /**
+     * Label for 'clear' button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.clearButtonLabel;
+    /**
+     * Label for 'custom range' button
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.customRangeButtonLabel;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var DATEPICKER_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)';
+/** @type {?} */
+var datepickerAnimation = trigger('datepickerAnimation', [
+    state('animated-down', style({ height: '*', overflow: 'hidden' })),
+    transition('* => animated-down', [
+        style({ height: 0, overflow: 'hidden' }),
+        animate(DATEPICKER_ANIMATION_TIMING)
+    ]),
+    state('animated-up', style({ height: '*', overflow: 'hidden' })),
+    transition('* => animated-up', [
+        style({ height: '*', overflow: 'hidden' }),
+        animate(DATEPICKER_ANIMATION_TIMING)
+    ]),
+    transition('* => unanimated', animate('0s'))
+]);
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -214,6 +321,7 @@ var  /**
 BsDatepickerAbstractComponent = /** @class */ (function () {
     function BsDatepickerAbstractComponent() {
         this.customRanges = [];
+        this.chosenRange = [];
     }
     Object.defineProperty(BsDatepickerAbstractComponent.prototype, "minDate", {
         set: /**
@@ -292,6 +400,17 @@ BsDatepickerAbstractComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(BsDatepickerAbstractComponent.prototype, "dateTooltipTexts", {
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this._effects.setDateTooltipTexts(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @param {?} event
      * @return {?}
@@ -373,6 +492,29 @@ BsDatepickerAbstractComponent = /** @class */ (function () {
      * @return {?}
      */
     function (event) { };
+    /**
+     * @param {?} dates
+     * @return {?}
+     */
+    BsDatepickerAbstractComponent.prototype.setRangeOnCalendar = /**
+     * @param {?} dates
+     * @return {?}
+     */
+    function (dates) { };
+    /**
+     * @return {?}
+     */
+    BsDatepickerAbstractComponent.prototype.setToday = /**
+     * @return {?}
+     */
+    function () { };
+    /**
+     * @return {?}
+     */
+    BsDatepickerAbstractComponent.prototype.clearDate = /**
+     * @return {?}
+     */
+    function () { };
     /* tslint:disable-next-line: no-any */
     /* tslint:disable-next-line: no-any */
     /**
@@ -395,10 +537,26 @@ if (false) {
     /** @type {?} */
     BsDatepickerAbstractComponent.prototype.isOtherMonthsActive;
     /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.showTodayBtn;
+    /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.todayBtnLbl;
+    /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.todayPos;
+    /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.showClearBtn;
+    /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.clearBtnLbl;
+    /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.clearPos;
+    /** @type {?} */
     BsDatepickerAbstractComponent.prototype._effects;
     /** @type {?} */
     BsDatepickerAbstractComponent.prototype.customRanges;
     /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.customRangeBtnLbl;
+    /** @type {?} */
+    BsDatepickerAbstractComponent.prototype.chosenRange;
+    /** @type {?} */
     BsDatepickerAbstractComponent.prototype.viewMode;
     /** @type {?} */
     BsDatepickerAbstractComponent.prototype.daysCalendar;
@@ -644,6 +802,20 @@ var BsDatepickerActions = /** @class */ (function () {
             payload: value
         };
     };
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    BsDatepickerActions.prototype.setDateTooltipTexts = /**
+     * @param {?} value
+     * @return {?}
+     */
+    function (value) {
+        return {
+            type: BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS,
+            payload: value
+        };
+    };
     /**
      * @param {?} locale
      * @return {?}
@@ -674,6 +846,7 @@ var BsDatepickerActions = /** @class */ (function () {
     BsDatepickerActions.SET_DATESENABLED = '[datepicker] set dates enabled';
     BsDatepickerActions.SET_IS_DISABLED = '[datepicker] set is disabled';
     BsDatepickerActions.SET_DATE_CUSTOM_CLASSES = '[datepicker] set date custom classes';
+    BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS = '[datepicker] set date tooltip texts';
     BsDatepickerActions.SET_LOCALE = '[datepicker] set datepicker locale';
     BsDatepickerActions.SELECT_RANGE = '[daterangepicker] select dates range';
     BsDatepickerActions.decorators = [
@@ -715,6 +888,8 @@ if (false) {
     /** @type {?} */
     BsDatepickerActions.SET_DATE_CUSTOM_CLASSES;
     /** @type {?} */
+    BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS;
+    /** @type {?} */
     BsDatepickerActions.SET_LOCALE;
     /** @type {?} */
     BsDatepickerActions.SELECT_RANGE;
@@ -928,6 +1103,18 @@ var BsDatepickerEffects = /** @class */ (function () {
         this._store.dispatch(this._actions.setDateCustomClasses(value));
         return this;
     };
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    BsDatepickerEffects.prototype.setDateTooltipTexts = /**
+     * @param {?} value
+     * @return {?}
+     */
+    function (value) {
+        this._store.dispatch(this._actions.setDateTooltipTexts(value));
+        return this;
+    };
     /* Set rendering options */
     /* Set rendering options */
     /**
@@ -1064,37 +1251,6 @@ var BsDatepickerEffects = /** @class */ (function () {
         function (event) {
             event.cell.isHovered = event.isHovered;
         });
-        container.monthSelectHandler = (/**
-         * @param {?} event
-         * @return {?}
-         */
-        function (event) {
-            if (event.isDisabled) {
-                return;
-            }
-            _this._store.dispatch(_this._actions.navigateTo({
-                unit: {
-                    month: getMonth(event.date),
-                    year: getFullYear(event.date)
-                },
-                viewMode: 'day'
-            }));
-        });
-        container.yearSelectHandler = (/**
-         * @param {?} event
-         * @return {?}
-         */
-        function (event) {
-            if (event.isDisabled) {
-                return;
-            }
-            _this._store.dispatch(_this._actions.navigateTo({
-                unit: {
-                    year: getFullYear(event.date)
-                },
-                viewMode: 'month'
-            }));
-        });
         return this;
     };
     /**
@@ -1245,6 +1401,23 @@ var BsDatepickerEffects = /** @class */ (function () {
          * @return {?}
          */
         function (dateCustomClasses) { return _this._store.dispatch(_this._actions.flag()); })));
+        // date tooltip texts
+        this._subs.push(this._store
+            .select((/**
+         * @param {?} state
+         * @return {?}
+         */
+        function (state) { return state.dateTooltipTexts; }))
+            .pipe(filter((/**
+         * @param {?} dateTooltipTexts
+         * @return {?}
+         */
+        function (dateTooltipTexts) { return !!dateTooltipTexts; })))
+            .subscribe((/**
+         * @param {?} dateTooltipTexts
+         * @return {?}
+         */
+        function (dateTooltipTexts) { return _this._store.dispatch(_this._actions.flag()); })));
         // on locale change
         this._subs.push(this._localeService.localeChange
             .subscribe((/**
@@ -1372,6 +1545,8 @@ if (false) {
     /** @type {?} */
     BsDatepickerState.prototype.dateCustomClasses;
     /** @type {?} */
+    BsDatepickerState.prototype.dateTooltipTexts;
+    /** @type {?} */
     BsDatepickerState.prototype.hoveredDate;
     /** @type {?} */
     BsDatepickerState.prototype.hoveredMonth;
@@ -1698,6 +1873,8 @@ if (false) {
     FlagDaysCalendarOptions.prototype.monthIndex;
     /** @type {?} */
     FlagDaysCalendarOptions.prototype.dateCustomClasses;
+    /** @type {?} */
+    FlagDaysCalendarOptions.prototype.dateTooltipTexts;
 }
 /**
  * @param {?} formattedMonth
@@ -1765,6 +1942,21 @@ function flagDaysCalendar(formattedMonth, options) {
             function (previousValue, currentValue) { return previousValue.concat(currentValue); }), [])
                 .join(' ')
                 || '';
+            /** @type {?} */
+            var tooltipText = options.dateTooltipTexts && options.dateTooltipTexts
+                .map((/**
+             * @param {?} tt
+             * @return {?}
+             */
+            function (tt) { return isSameDay(day.date, tt.date) ? tt.tooltipText : ''; }))
+                .reduce((/**
+             * @param {?} previousValue
+             * @param {?} currentValue
+             * @return {?}
+             */
+            function (previousValue, currentValue) { return previousValue.concat(currentValue); }), [])
+                .join(' ')
+                || '';
             // decide update or not
             /** @type {?} */
             var newDay = Object.assign({}, day, {
@@ -1776,7 +1968,8 @@ function flagDaysCalendar(formattedMonth, options) {
                 isInRange: isInRange,
                 isDisabled: isDisabled,
                 isToday: isToday,
-                customClasses: customClasses
+                customClasses: customClasses,
+                tooltipText: tooltipText
             });
             if (day.isOtherMonth !== newDay.isOtherMonth ||
                 day.isHovered !== newDay.isHovered ||
@@ -1785,7 +1978,8 @@ function flagDaysCalendar(formattedMonth, options) {
                 day.isSelectionEnd !== newDay.isSelectionEnd ||
                 day.isDisabled !== newDay.isDisabled ||
                 day.isInRange !== newDay.isInRange ||
-                day.customClasses !== newDay.customClasses) {
+                day.customClasses !== newDay.customClasses ||
+                day.tooltipText !== newDay.tooltipText) {
                 week.days[dayIndex] = newDay;
             }
         }));
@@ -1890,6 +2084,8 @@ if (false) {
     /** @type {?} */
     FlagMonthCalendarOptions.prototype.selectedDate;
     /** @type {?} */
+    FlagMonthCalendarOptions.prototype.selectedRange;
+    /** @type {?} */
     FlagMonthCalendarOptions.prototype.displayMonths;
     /** @type {?} */
     FlagMonthCalendarOptions.prototype.monthIndex;
@@ -1912,13 +2108,22 @@ function flagMonthsCalendar(monthCalendar, options) {
          * @return {?}
          */
         function (month, monthIndex) {
+            /** @type {?} */
+            var isSelected;
             /** @type {?} */
             var isHovered = isSameMonth(month.date, options.hoveredMonth);
             /** @type {?} */
             var isDisabled = options.isDisabled ||
                 isMonthDisabled(month.date, options.minDate, options.maxDate);
-            /** @type {?} */
-            var isSelected = isSameMonth(month.date, options.selectedDate);
+            if (!options.selectedDate && options.selectedRange) {
+                isSelected = isSameMonth(month.date, options.selectedRange[0]);
+                if (!isSelected) {
+                    isSelected = isSameMonth(month.date, options.selectedRange[1]);
+                }
+            }
+            else {
+                isSelected = isSameMonth(month.date, options.selectedDate);
+            }
             /** @type {?} */
             var newMonth = Object.assign(/*{},*/ month, {
                 isHovered: isHovered,
@@ -2031,6 +2236,8 @@ if (false) {
     /** @type {?} */
     FlagYearsCalendarOptions.prototype.selectedDate;
     /** @type {?} */
+    FlagYearsCalendarOptions.prototype.selectedRange;
+    /** @type {?} */
     FlagYearsCalendarOptions.prototype.displayMonths;
     /** @type {?} */
     FlagYearsCalendarOptions.prototype.yearIndex;
@@ -2053,13 +2260,22 @@ function flagYearsCalendar(yearsCalendar, options) {
          * @return {?}
          */
         function (year, yearIndex) {
+            /** @type {?} */
+            var isSelected;
             /** @type {?} */
             var isHovered = isSameYear(year.date, options.hoveredYear);
             /** @type {?} */
             var isDisabled = options.isDisabled ||
                 isYearDisabled(year.date, options.minDate, options.maxDate);
-            /** @type {?} */
-            var isSelected = isSameYear(year.date, options.selectedDate);
+            if (!options.selectedDate && options.selectedRange) {
+                isSelected = isSameYear(year.date, options.selectedRange[0]);
+                if (!isSelected) {
+                    isSelected = isSameYear(year.date, options.selectedRange[1]);
+                }
+            }
+            else {
+                isSelected = isSameYear(year.date, options.selectedDate);
+            }
             /** @type {?} */
             var newMonth = Object.assign(/*{},*/ year, { isHovered: isHovered, isDisabled: isDisabled, isSelected: isSelected });
             if (year.isHovered !== newMonth.isHovered ||
@@ -2222,6 +2438,11 @@ function bsDatepickerReducer(state, action) {
                 dateCustomClasses: action.payload
             });
         }
+        case BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS: {
+            return Object.assign({}, state, {
+                dateTooltipTexts: action.payload
+            });
+        }
         default:
             return state;
     }
@@ -2239,7 +2460,7 @@ function calculateReducer(state) {
     /** @type {?} */
     var viewDate = state.view.date;
     if (state.view.mode === 'day') {
-        if (state.showPreviousMonth && state.selectedRange.length === 0) {
+        if (state.showPreviousMonth && state.selectedRange && state.selectedRange.length === 0) {
             viewDate = shiftDate(viewDate, { month: -1 });
         }
         state.monthViewOptions.firstDayOfWeek = getLocale(state.locale).firstDayOfWeek();
@@ -2349,6 +2570,7 @@ function flagReducer(state, action) {
                 selectedRange: state.selectedRange,
                 displayMonths: displayMonths,
                 dateCustomClasses: state.dateCustomClasses,
+                dateTooltipTexts: state.dateTooltipTexts,
                 monthIndex: monthIndex
             });
         }));
@@ -2368,6 +2590,7 @@ function flagReducer(state, action) {
                 maxDate: state.maxDate,
                 hoveredMonth: state.hoveredMonth,
                 selectedDate: state.selectedDate,
+                selectedRange: state.selectedRange,
                 displayMonths: displayMonths,
                 monthIndex: monthIndex
             });
@@ -2388,6 +2611,7 @@ function flagReducer(state, action) {
                 maxDate: state.maxDate,
                 hoveredYear: state.hoveredYear,
                 selectedDate: state.selectedDate,
+                selectedRange: state.selectedRange,
                 displayMonths: displayMonths,
                 yearIndex: yearIndex
             });
@@ -2503,27 +2727,6 @@ var BsDatepickerStore = /** @class */ (function (_super) {
     return BsDatepickerStore;
 }(MiniStore));
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-var DATEPICKER_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)';
-/** @type {?} */
-var datepickerAnimation = trigger('datepickerAnimation', [
-    state('animated-down', style({ height: '*', overflow: 'hidden' })),
-    transition('* => animated-down', [
-        style({ height: 0, overflow: 'hidden' }),
-        animate(DATEPICKER_ANIMATION_TIMING)
-    ]),
-    state('animated-up', style({ height: '*', overflow: 'hidden' })),
-    transition('* => animated-up', [
-        style({ height: '*', overflow: 'hidden' }),
-        animate(DATEPICKER_ANIMATION_TIMING)
-    ]),
-    transition('* => unanimated', animate('0s'))
-]);
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2583,6 +2786,13 @@ var BsDatepickerContainerComponent = /** @class */ (function (_super) {
         }));
         this.isOtherMonthsActive = this._config.selectFromOtherMonth;
         this.containerClass = this._config.containerClass;
+        this.showTodayBtn = this._config.showTodayButton;
+        this.todayBtnLbl = this._config.todayButtonLabel;
+        this.todayPos = this._config.todayPosition;
+        this.showClearBtn = this._config.showClearButton;
+        this.clearBtnLbl = this._config.clearButtonLabel;
+        this.clearPos = this._config.clearPosition;
+        this.customRangeBtnLbl = this._config.customRangeButtonLabel;
         this._effects
             .init(this._store)
             // intial state options
@@ -2607,6 +2817,7 @@ var BsDatepickerContainerComponent = /** @class */ (function (_super) {
          * @return {?}
          */
         function (date) { return _this.valueChange.emit(date); })));
+        this._store.dispatch(this._actions.changeViewMode(this._config.startView));
     };
     Object.defineProperty(BsDatepickerContainerComponent.prototype, "isTopPosition", {
         get: /**
@@ -2646,6 +2857,63 @@ var BsDatepickerContainerComponent = /** @class */ (function (_super) {
         }
         this._store.dispatch(this._actions.select(day.date));
     };
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    BsDatepickerContainerComponent.prototype.monthSelectHandler = /**
+     * @param {?} day
+     * @return {?}
+     */
+    function (day) {
+        if (!day || day.isDisabled) {
+            return;
+        }
+        this._store.dispatch(this._actions.navigateTo({
+            unit: {
+                month: getMonth(day.date),
+                year: getFullYear(day.date)
+            },
+            viewMode: 'day'
+        }));
+    };
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    BsDatepickerContainerComponent.prototype.yearSelectHandler = /**
+     * @param {?} day
+     * @return {?}
+     */
+    function (day) {
+        if (!day || day.isDisabled) {
+            return;
+        }
+        this._store.dispatch(this._actions.navigateTo({
+            unit: {
+                year: getFullYear(day.date)
+            },
+            viewMode: 'month'
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    BsDatepickerContainerComponent.prototype.setToday = /**
+     * @return {?}
+     */
+    function () {
+        this._store.dispatch(this._actions.select(new Date()));
+    };
+    /**
+     * @return {?}
+     */
+    BsDatepickerContainerComponent.prototype.clearDate = /**
+     * @return {?}
+     */
+    function () {
+        this._store.dispatch(this._actions.select(undefined));
+    };
     /**
      * @return {?}
      */
@@ -2673,7 +2941,7 @@ var BsDatepickerContainerComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     selector: 'bs-datepicker-container',
                     providers: [BsDatepickerStore, BsDatepickerEffects],
-                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view \n      [selectedRange]=\"chosenRange\" \n      [ranges]=\"customRanges\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
+                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
                     host: {
                         class: 'bottom',
                         '(click)': '_stopPropagation($event)',
@@ -2761,6 +3029,7 @@ var BsDatepickerDirective = /** @class */ (function () {
          */
         this.bsValueChange = new EventEmitter();
         this._subs = [];
+        this._dateInputFormat$ = new Subject();
         // todo: assign only subset of fields
         Object.assign(this, this._config);
         this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
@@ -2808,6 +3077,39 @@ var BsDatepickerDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(BsDatepickerDirective.prototype, "bsConfig", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._bsConfig;
+        },
+        /**
+         * Config object for datepicker
+         */
+        set: /**
+         * Config object for datepicker
+         * @param {?} bsConfig
+         * @return {?}
+         */
+        function (bsConfig) {
+            this._bsConfig = bsConfig;
+            this.setConfig();
+            this._dateInputFormat$.next(bsConfig && bsConfig.dateInputFormat);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BsDatepickerDirective.prototype, "dateInputFormat$", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._dateInputFormat$;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -2861,6 +3163,9 @@ var BsDatepickerDirective = /** @class */ (function () {
         if (changes.dateCustomClasses) {
             this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
         }
+        if (changes.dateTooltipTexts) {
+            this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
+        }
     };
     /**
      * @return {?}
@@ -2999,6 +3304,7 @@ var BsDatepickerDirective = /** @class */ (function () {
             maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
             daysDisabled: this.daysDisabled || this.bsConfig && this.bsConfig.daysDisabled,
             dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
+            dateTooltipTexts: this.dateTooltipTexts || this.bsConfig && this.bsConfig.dateTooltipTexts,
             datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
             datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
             minMode: this.minMode || this.bsConfig && this.bsConfig.minMode
@@ -3051,6 +3357,7 @@ var BsDatepickerDirective = /** @class */ (function () {
         datesDisabled: [{ type: Input }],
         datesEnabled: [{ type: Input }],
         dateCustomClasses: [{ type: Input }],
+        dateTooltipTexts: [{ type: Input }],
         bsValueChange: [{ type: Output }]
     };
     return BsDatepickerDirective;
@@ -3095,11 +3402,6 @@ if (false) {
     BsDatepickerDirective.prototype.isOpen$;
     /** @type {?} */
     BsDatepickerDirective.prototype.isDestroy$;
-    /**
-     * Config object for datepicker
-     * @type {?}
-     */
-    BsDatepickerDirective.prototype.bsConfig;
     /**
      * Indicates whether datepicker's content is enabled or not
      * @type {?}
@@ -3140,6 +3442,11 @@ if (false) {
      * @type {?}
      */
     BsDatepickerDirective.prototype.dateCustomClasses;
+    /**
+     * Date tooltip text
+     * @type {?}
+     */
+    BsDatepickerDirective.prototype.dateTooltipTexts;
     /**
      * Emits when datepicker value has been changed
      * @type {?}
@@ -3160,6 +3467,16 @@ if (false) {
      * @private
      */
     BsDatepickerDirective.prototype._datepickerRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDatepickerDirective.prototype._bsConfig;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDatepickerDirective.prototype._dateInputFormat$;
     /** @type {?} */
     BsDatepickerDirective.prototype._config;
     /**
@@ -3184,8 +3501,11 @@ var BsDatepickerInlineConfig = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     BsDatepickerInlineConfig.decorators = [
-        { type: Injectable }
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
+    /** @nocollapse */ BsDatepickerInlineConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDatepickerInlineConfig_Factory() { return new BsDatepickerInlineConfig(); }, token: BsDatepickerInlineConfig, providedIn: "root" });
     return BsDatepickerInlineConfig;
 }(BsDatepickerConfig));
 
@@ -3205,7 +3525,7 @@ var BsDatepickerInlineContainerComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     selector: 'bs-datepicker-inline-container',
                     providers: [BsDatepickerStore, BsDatepickerEffects],
-                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view \n      [selectedRange]=\"chosenRange\" \n      [ranges]=\"customRanges\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
+                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
                     host: {
                         '(click)': '_stopPropagation($event)'
                     },
@@ -3323,6 +3643,10 @@ var BsDatepickerInlineDirective = /** @class */ (function () {
             this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
             this.setConfig();
         }
+        if (changes.dateTooltipTexts) {
+            this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
+            this.setConfig();
+        }
     };
     /**
      * Set config for datepicker
@@ -3345,6 +3669,7 @@ var BsDatepickerInlineDirective = /** @class */ (function () {
             minDate: this.minDate || this.bsConfig && this.bsConfig.minDate,
             maxDate: this.maxDate || this.bsConfig && this.bsConfig.maxDate,
             dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
+            dateTooltipTexts: this.dateTooltipTexts || this.bsConfig && this.bsConfig.dateTooltipTexts,
             datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
             datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled
         });
@@ -3384,6 +3709,7 @@ var BsDatepickerInlineDirective = /** @class */ (function () {
         minDate: [{ type: Input }],
         maxDate: [{ type: Input }],
         dateCustomClasses: [{ type: Input }],
+        dateTooltipTexts: [{ type: Input }],
         datesEnabled: [{ type: Input }],
         datesDisabled: [{ type: Input }],
         bsValueChange: [{ type: Output }]
@@ -3418,6 +3744,11 @@ if (false) {
      * @type {?}
      */
     BsDatepickerInlineDirective.prototype.dateCustomClasses;
+    /**
+     * Date tooltip text
+     * @type {?}
+     */
+    BsDatepickerInlineDirective.prototype.dateTooltipTexts;
     /**
      * Disable specific dates
      * @type {?}
@@ -3474,8 +3805,11 @@ var BsDaterangepickerInlineConfig = /** @class */ (function (_super) {
         return _this;
     }
     BsDaterangepickerInlineConfig.decorators = [
-        { type: Injectable }
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
+    /** @nocollapse */ BsDaterangepickerInlineConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDaterangepickerInlineConfig_Factory() { return new BsDaterangepickerInlineConfig(); }, token: BsDaterangepickerInlineConfig, providedIn: "root" });
     return BsDaterangepickerInlineConfig;
 }(BsDatepickerConfig));
 if (false) {
@@ -3508,6 +3842,7 @@ var BsDaterangepickerContainerComponent = /** @class */ (function (_super) {
         _this._subs = [];
         _this._effects = _effects;
         _this.customRanges = _this._config.ranges;
+        _this.customRangeBtnLbl = _this._config.customRangeButtonLabel;
         _renderer.setStyle(_element.nativeElement, 'display', 'block');
         _renderer.setStyle(_element.nativeElement, 'position', 'absolute');
         return _this;
@@ -3613,6 +3948,72 @@ var BsDaterangepickerContainerComponent = /** @class */ (function (_super) {
         if (isDisabled) {
             return;
         }
+        this.rangesProcessing(day);
+    };
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    BsDaterangepickerContainerComponent.prototype.monthSelectHandler = /**
+     * @param {?} day
+     * @return {?}
+     */
+    function (day) {
+        if (!day) {
+            return;
+        }
+        day.isSelected = true;
+        if (this._config.minMode !== 'month') {
+            if (day.isDisabled) {
+                return;
+            }
+            this._store.dispatch(this._actions.navigateTo({
+                unit: {
+                    month: getMonth(day.date),
+                    year: getFullYear(day.date)
+                },
+                viewMode: 'day'
+            }));
+            return;
+        }
+        this.rangesProcessing(day);
+    };
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    BsDaterangepickerContainerComponent.prototype.yearSelectHandler = /**
+     * @param {?} day
+     * @return {?}
+     */
+    function (day) {
+        if (!day) {
+            return;
+        }
+        day.isSelected = true;
+        if (this._config.minMode !== 'year') {
+            if (day.isDisabled) {
+                return;
+            }
+            this._store.dispatch(this._actions.navigateTo({
+                unit: {
+                    year: getFullYear(day.date)
+                },
+                viewMode: 'month'
+            }));
+            return;
+        }
+        this.rangesProcessing(day);
+    };
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    BsDaterangepickerContainerComponent.prototype.rangesProcessing = /**
+     * @param {?} day
+     * @return {?}
+     */
+    function (day) {
         // if only one date is already selected
         // and user clicks on previous date
         // start selection from new date
@@ -3626,6 +4027,9 @@ var BsDaterangepickerContainerComponent = /** @class */ (function (_super) {
         }
         if (this._rangeStack.length === 0) {
             this._rangeStack = [day.date];
+            if (this._config.maxDateRange) {
+                this.setMaxDateRangeOnCalendar(day.date);
+            }
         }
         this._store.dispatch(this._actions.selectRange(this._rangeStack));
         if (this._rangeStack.length === 2) {
@@ -3667,11 +4071,25 @@ var BsDaterangepickerContainerComponent = /** @class */ (function (_super) {
         this._rangeStack = (dates === null) ? [] : (dates.value instanceof Date ? [dates.value] : dates.value);
         this._store.dispatch(this._actions.selectRange(this._rangeStack));
     };
+    /**
+     * @param {?} currentSelection
+     * @return {?}
+     */
+    BsDaterangepickerContainerComponent.prototype.setMaxDateRangeOnCalendar = /**
+     * @param {?} currentSelection
+     * @return {?}
+     */
+    function (currentSelection) {
+        /** @type {?} */
+        var maxDateRange = new Date(currentSelection);
+        maxDateRange.setDate(currentSelection.getDate() + this._config.maxDateRange);
+        this._effects.setMaxDate(maxDateRange);
+    };
     BsDaterangepickerContainerComponent.decorators = [
         { type: Component, args: [{
                     selector: 'bs-daterangepicker-container',
                     providers: [BsDatepickerStore, BsDatepickerEffects],
-                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view \n      [selectedRange]=\"chosenRange\" \n      [ranges]=\"customRanges\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
+                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
                     host: {
                         class: 'bottom',
                         '(click)': '_stopPropagation($event)',
@@ -3747,7 +4165,7 @@ var BsDaterangepickerInlineContainerComponent = /** @class */ (function (_super)
         { type: Component, args: [{
                     selector: 'bs-daterangepicker-inline-container',
                     providers: [BsDatepickerStore, BsDatepickerEffects],
-                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view \n      [selectedRange]=\"chosenRange\" \n      [ranges]=\"customRanges\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
+                    template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <div *ngSwitchCase=\"'day'\" class=\"bs-media-container\">\n        <bs-days-calendar-view\n          *ngFor=\"let calendar of daysCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          [options]=\"options | async\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"dayHoverHandler($event)\"\n          (onHoverWeek)=\"weekHoverHandler($event)\"\n          (onSelect)=\"daySelectHandler($event)\">\n        </bs-days-calendar-view>\n      </div>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"(daysCalendar | async)?.length > 1\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges?.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n",
                     host: {
                         '(click)': '_stopPropagation($event)'
                     },
@@ -3899,7 +4317,8 @@ var BsDaterangepickerInlineDirective = /** @class */ (function () {
             dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
             datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
             datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
-            ranges: this.bsConfig && this.bsConfig.ranges
+            ranges: this.bsConfig && this.bsConfig.ranges,
+            maxDateRange: this.bsConfig && this.bsConfig.maxDateRange
         });
         this._datepickerRef = this._datepicker
             .provide({ provide: BsDatepickerConfig, useValue: this._config })
@@ -4073,6 +4492,13 @@ var BsDatepickerInputDirective = /** @class */ (function () {
         function () {
             _this._setInputValue(_this._value);
         }));
+        // update input value on format change
+        this._picker.dateInputFormat$.pipe(distinctUntilChanged()).subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._setInputValue(_this._value);
+        }));
     }
     /**
      * @param {?} event
@@ -4330,8 +4756,11 @@ var BsDaterangepickerConfig = /** @class */ (function (_super) {
         return _this;
     }
     BsDaterangepickerConfig.decorators = [
-        { type: Injectable }
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
+    /** @nocollapse */ BsDaterangepickerConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDaterangepickerConfig_Factory() { return new BsDaterangepickerConfig(); }, token: BsDaterangepickerConfig, providedIn: "root" });
     return BsDaterangepickerConfig;
 }(BsDatepickerConfig));
 if (false) {
@@ -4371,6 +4800,7 @@ var BsDaterangepickerDirective = /** @class */ (function () {
          */
         this.bsValueChange = new EventEmitter();
         this._subs = [];
+        this._rangeInputFormat$ = new Subject();
         this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
         Object.assign(this, _config);
         this.onShown = this._datepicker.onShown;
@@ -4417,6 +4847,39 @@ var BsDaterangepickerDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(BsDaterangepickerDirective.prototype, "bsConfig", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._bsConfig;
+        },
+        /**
+         * Config object for daterangepicker
+         */
+        set: /**
+         * Config object for daterangepicker
+         * @param {?} bsConfig
+         * @return {?}
+         */
+        function (bsConfig) {
+            this._bsConfig = bsConfig;
+            this.setConfig();
+            this._rangeInputFormat$.next(bsConfig && bsConfig.rangeInputFormat);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BsDaterangepickerDirective.prototype, "rangeInputFormat$", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._rangeInputFormat$;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -4560,7 +5023,8 @@ var BsDaterangepickerDirective = /** @class */ (function () {
             dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
             datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
             datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
-            ranges: this.bsConfig && this.bsConfig.ranges
+            ranges: this.bsConfig && this.bsConfig.ranges,
+            maxDateRange: this.bsConfig && this.bsConfig.maxDateRange
         });
     };
     /**
@@ -4709,11 +5173,6 @@ if (false) {
     BsDaterangepickerDirective.prototype.isOpen$;
     /** @type {?} */
     BsDaterangepickerDirective.prototype.isDestroy$;
-    /**
-     * Config object for daterangepicker
-     * @type {?}
-     */
-    BsDaterangepickerDirective.prototype.bsConfig;
     /**
      * Indicates whether daterangepicker's content is enabled or not
      * @type {?}
@@ -4769,6 +5228,16 @@ if (false) {
      * @private
      */
     BsDaterangepickerDirective.prototype._datepickerRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDaterangepickerDirective.prototype._bsConfig;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDaterangepickerDirective.prototype._rangeInputFormat$;
     /** @type {?} */
     BsDaterangepickerDirective.prototype._config;
     /**
@@ -4840,6 +5309,13 @@ var BsDaterangepickerInputDirective = /** @class */ (function () {
         function () {
             _this._setInputValue(_this._value);
         }));
+        // update input value on format change
+        this._picker.rangeInputFormat$.pipe(distinctUntilChanged()).subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._setInputValue(_this._value);
+        }));
     }
     /**
      * @param {?} event
@@ -4986,9 +5462,9 @@ var BsDaterangepickerInputDirective = /** @class */ (function () {
              */
             function (_val) {
                 if (_this._picker._config.useUtc) {
-                    return utcAsLocal(parseDate(_val, _this._picker._config.dateInputFormat, _this._localeService.currentLocale));
+                    return utcAsLocal(parseDate(_val, _this._picker._config.rangeInputFormat, _this._localeService.currentLocale));
                 }
-                return parseDate(_val, _this._picker._config.dateInputFormat, _this._localeService.currentLocale);
+                return parseDate(_val, _this._picker._config.rangeInputFormat, _this._localeService.currentLocale);
             }))
                 .map((/**
              * @param {?} date
@@ -5220,13 +5696,14 @@ var BsCustomDatesViewComponent = /** @class */ (function () {
     BsCustomDatesViewComponent.decorators = [
         { type: Component, args: [{
                     selector: 'bs-custom-date-view',
-                    template: "\n    <div class=\"bs-datepicker-predefined-btns\">\n      <button *ngFor=\"let range of ranges\"\n        type=\"button\"\n        class=\"btn\"\n        (click)=\"selectFromRanges(range)\"\n        [class.selected]=\"range.value === selectedRange\">\n        {{ range.label }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"btn\"\n        (click)=\"selectFromRanges(customRange)\"\n        [class.selected]=\"!checkRange()\">\n        Custom Range\n      </button>\n    </div>\n  ",
+                    template: "\n    <div class=\"bs-datepicker-predefined-btns\">\n      <button *ngFor=\"let range of ranges\"\n        type=\"button\"\n        class=\"btn\"\n        (click)=\"selectFromRanges(range)\"\n        [class.selected]=\"range.value === selectedRange\">\n        {{ range.label }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"btn\"\n        (click)=\"selectFromRanges(customRange)\"\n        [class.selected]=\"!checkRange()\">\n        {{customRangeLabel}}\n      </button>\n    </div>\n  ",
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }] }
     ];
     BsCustomDatesViewComponent.propDecorators = {
         ranges: [{ type: Input }],
         selectedRange: [{ type: Input }],
+        customRangeLabel: [{ type: Input }],
         onSelect: [{ type: Output }]
     };
     return BsCustomDatesViewComponent;
@@ -5237,6 +5714,8 @@ if (false) {
     /** @type {?} */
     BsCustomDatesViewComponent.prototype.selectedRange;
     /** @type {?} */
+    BsCustomDatesViewComponent.prototype.customRangeLabel;
+    /** @type {?} */
     BsCustomDatesViewComponent.prototype.onSelect;
     /** @type {?} */
     BsCustomDatesViewComponent.prototype.customRange;
@@ -5387,6 +5866,8 @@ if (false) {
     /** @type {?|undefined} */
     DayViewModel.prototype.customClasses;
     /** @type {?|undefined} */
+    DayViewModel.prototype.tooltipText;
+    /** @type {?|undefined} */
     DayViewModel.prototype.monthIndex;
     /** @type {?|undefined} */
     DayViewModel.prototype.weekIndex;
@@ -5500,6 +5981,16 @@ if (false) {
     /** @type {?} */
     DatepickerDateCustomClasses.prototype.classes;
 }
+/**
+ * @record
+ */
+function DatepickerDateTooltipText() { }
+if (false) {
+    /** @type {?} */
+    DatepickerDateTooltipText.prototype.date;
+    /** @type {?} */
+    DatepickerDateTooltipText.prototype.tooltipText;
+}
 /** @enum {number} */
 var BsNavigationDirection = {
     UP: 0,
@@ -5604,6 +6095,11 @@ var BsDaysCalendarViewComponent = /** @class */ (function () {
         this.onSelect = new EventEmitter();
         this.onHover = new EventEmitter();
         this.onHoverWeek = new EventEmitter();
+        this.isiOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
+            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));
+        if (this._config.dateTooltipTexts && this._config.dateTooltipTexts.length > 0) {
+            this.isShowTooltip = true;
+        }
     }
     /**
      * @param {?} event
@@ -5734,13 +6230,26 @@ var BsDaysCalendarViewComponent = /** @class */ (function () {
         if (this._config.selectFromOtherMonth && cell.isOtherMonth) {
             cell.isOtherMonthHovered = isHovered;
         }
+        if (this._config.dateTooltipTexts) {
+            cell.tooltipText = '';
+            this._config.dateTooltipTexts.forEach((/**
+             * @param {?} dateData
+             * @return {?}
+             */
+            function (dateData) {
+                if (isSameDay(dateData.date, cell.date)) {
+                    cell.tooltipText = dateData.tooltipText;
+                    return;
+                }
+            }));
+        }
         this.onHover.emit({ cell: cell, isHovered: isHovered });
     };
     BsDaysCalendarViewComponent.decorators = [
         { type: Component, args: [{
                     selector: 'bs-days-calendar-view',
                     // changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: "\n    <bs-calendar-layout>\n      <bs-datepicker-navigation-view\n        [calendar]=\"calendar\"\n        (onNavigate)=\"navigateTo($event)\"\n        (onViewMode)=\"changeViewMode($event)\"\n      ></bs-datepicker-navigation-view>\n\n      <!--days matrix-->\n      <table role=\"grid\" class=\"days weeks\">\n        <thead>\n        <tr>\n          <!--if show weeks-->\n          <th *ngIf=\"options.showWeekNumbers\"></th>\n          <th *ngFor=\"let weekday of calendar.weekdays; let i = index\"\n              aria-label=\"weekday\">{{ calendar.weekdays[i] }}\n          </th>\n        </tr>\n        </thead>\n        <tbody>\n        <tr *ngFor=\"let week of calendar.weeks; let i = index\">\n          <td class=\"week\" [class.active-week]=\"isWeekHovered\"  *ngIf=\"options.showWeekNumbers\">\n            <span\n                (click)=\"selectWeek(week)\"\n                (mouseenter)=\"weekHoverHandler(week, true)\"\n                (mouseleave)=\"weekHoverHandler(week, false)\">{{ calendar.weekNumbers[i] }}</span>\n          </td>\n          <td *ngFor=\"let day of week.days\" role=\"gridcell\">\n          <span bsDatepickerDayDecorator\n                [day]=\"day\"\n                (click)=\"selectDay(day)\"\n                (mouseenter)=\"hoverDay(day, true)\"\n                (mouseleave)=\"hoverDay(day, false)\">{{ day.label }}</span>\n          </td>\n        </tr>\n        </tbody>\n      </table>\n\n    </bs-calendar-layout>\n  "
+                    template: "\n    <bs-calendar-layout>\n      <bs-datepicker-navigation-view\n        [calendar]=\"calendar\"\n        (onNavigate)=\"navigateTo($event)\"\n        (onViewMode)=\"changeViewMode($event)\"\n      ></bs-datepicker-navigation-view>\n\n      <!--days matrix-->\n      <table role=\"grid\" class=\"days weeks\">\n        <thead>\n        <tr>\n          <!--if show weeks-->\n          <th *ngIf=\"options.showWeekNumbers\"></th>\n          <th *ngFor=\"let weekday of calendar.weekdays; let i = index\"\n              aria-label=\"weekday\">{{ calendar.weekdays[i] }}\n          </th>\n        </tr>\n        </thead>\n        <tbody>\n        <tr *ngFor=\"let week of calendar.weeks; let i = index\">\n          <td class=\"week\" [class.active-week]=\"isWeekHovered\"  *ngIf=\"options.showWeekNumbers\">\n            <span *ngIf=\"isiOS\" (click)=\"selectWeek(week)\">{{ calendar.weekNumbers[i] }}</span>\n            <span *ngIf=\"!isiOS\"\n                (click)=\"selectWeek(week)\"\n                (mouseenter)=\"weekHoverHandler(week, true)\"\n                (mouseleave)=\"weekHoverHandler(week, false)\">{{ calendar.weekNumbers[i] }}</span>\n          </td>\n          <td *ngFor=\"let day of week.days\" role=\"gridcell\">\n\n            <!-- When we want to show tooltips for dates -->\n            <span *ngIf=\"!isiOS && isShowTooltip\" bsDatepickerDayDecorator\n                [day]=\"day\"\n                (click)=\"selectDay(day)\"\n                tooltip=\"{{day.tooltipText}}\"\n                (mouseenter)=\"hoverDay(day, true)\"\n                (mouseleave)=\"hoverDay(day, false)\">{{ day.label }} 3</span>\n            <!-- When tooltips for dates are disabled -->\n            <span *ngIf=\"!isiOS && !isShowTooltip\" bsDatepickerDayDecorator\n                  [day]=\"day\"\n                  (click)=\"selectDay(day)\"\n                  (mouseenter)=\"hoverDay(day, true)\"\n                  (mouseleave)=\"hoverDay(day, false)\">{{ day.label }} 2</span>\n\n            <!-- For mobile iOS view, tooltips are not needed -->\n            <span *ngIf=\"isiOS\" bsDatepickerDayDecorator\n                  [day]=\"day\"\n                  (click)=\"selectDay(day)\">{{ day.label }} 1</span>\n          </td>\n        </tr>\n        </tbody>\n      </table>\n\n    </bs-calendar-layout>\n  "
                 }] }
     ];
     /** @nocollapse */
@@ -5775,6 +6284,10 @@ if (false) {
     BsDaysCalendarViewComponent.prototype.onHoverWeek;
     /** @type {?} */
     BsDaysCalendarViewComponent.prototype.isWeekHovered;
+    /** @type {?} */
+    BsDaysCalendarViewComponent.prototype.isiOS;
+    /** @type {?} */
+    BsDaysCalendarViewComponent.prototype.isShowTooltip;
     /**
      * @type {?}
      * @private
@@ -6004,10 +6517,6 @@ var BsDatepickerModule = /** @class */ (function () {
                 PositioningService,
                 BsDatepickerStore,
                 BsDatepickerActions,
-                BsDatepickerConfig,
-                BsDaterangepickerConfig,
-                BsDatepickerInlineConfig,
-                BsDaterangepickerInlineConfig,
                 BsDatepickerEffects,
                 BsLocaleService
             ]
@@ -6015,7 +6524,7 @@ var BsDatepickerModule = /** @class */ (function () {
     };
     BsDatepickerModule.decorators = [
         { type: NgModule, args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, TooltipModule.forRoot()],
                     declarations: [
                         BsCalendarLayoutComponent,
                         BsCurrentDateViewComponent,
@@ -6732,8 +7241,11 @@ var DatepickerConfig = /** @class */ (function () {
         this.shortcutPropagation = false;
     }
     DatepickerConfig.decorators = [
-        { type: Injectable }
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
+    /** @nocollapse */ DatepickerConfig.ɵprov = ɵɵdefineInjectable({ factory: function DatepickerConfig_Factory() { return new DatepickerConfig(); }, token: DatepickerConfig, providedIn: "root" });
     return DatepickerConfig;
 }());
 if (false) {