ngx-bootstrap 5.6.1 → 6.2.0

package/datepicker/bundles/ngx-bootstrap-datepicker.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('ngx-bootstrap/chronos'), require('rxjs'), require('ngx-bootstrap/mini-ngrx'), require('ngx-bootstrap/positioning'), require('@angular/animations'), require('ngx-bootstrap/component-loader'), require('@angular/forms'), require('@angular/common'), require('ngx-bootstrap/utils')) :
-    typeof define === 'function' && define.amd ? define('ngx-bootstrap/datepicker', ['exports', '@angular/core', 'rxjs/operators', 'ngx-bootstrap/chronos', 'rxjs', 'ngx-bootstrap/mini-ngrx', 'ngx-bootstrap/positioning', '@angular/animations', 'ngx-bootstrap/component-loader', '@angular/forms', '@angular/common', 'ngx-bootstrap/utils'], factory) :
-    (global = global || self, factory((global['ngx-bootstrap'] = global['ngx-bootstrap'] || {}, global['ngx-bootstrap'].datepicker = {}), global.ng.core, global.rxjs.operators, global.chronos, global.rxjs, global.miniNgrx, global.positioning, global.ng.animations, global.componentLoader, global.ng.forms, global.ng.common, global.utils));
-}(this, (function (exports, core, operators, chronos, rxjs, miniNgrx, positioning, animations, componentLoader, forms, common, utils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('ngx-bootstrap/chronos'), require('ngx-bootstrap/positioning'), require('@angular/animations'), require('rxjs'), require('ngx-bootstrap/mini-ngrx'), require('ngx-bootstrap/component-loader'), require('@angular/forms'), require('@angular/common'), require('ngx-bootstrap/tooltip'), require('ngx-bootstrap/utils')) :
+    typeof define === 'function' && define.amd ? define('ngx-bootstrap/datepicker', ['exports', '@angular/core', 'rxjs/operators', 'ngx-bootstrap/chronos', 'ngx-bootstrap/positioning', '@angular/animations', 'rxjs', 'ngx-bootstrap/mini-ngrx', 'ngx-bootstrap/component-loader', '@angular/forms', '@angular/common', 'ngx-bootstrap/tooltip', 'ngx-bootstrap/utils'], factory) :
+    (global = global || self, factory((global['ngx-bootstrap'] = global['ngx-bootstrap'] || {}, global['ngx-bootstrap'].datepicker = {}), global.ng.core, global.rxjs.operators, global.chronos, global.positioning, global.ng.animations, global.rxjs, global.miniNgrx, global.componentLoader, global.ng.forms, global.ng.common, global.tooltip, global.utils));
+}(this, (function (exports, core, operators, chronos, positioning, animations, rxjs, miniNgrx, componentLoader, forms, common, tooltip, utils) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -213,6 +213,10 @@
              * 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
              */
@@ -242,10 +246,41 @@
             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: core.Injectable }
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
         ];
+        /** @nocollapse */ BsDatepickerConfig.ɵprov = core["ɵɵdefineInjectable"]({ factory: function BsDatepickerConfig_Factory() { return new BsDatepickerConfig(); }, token: BsDatepickerConfig, providedIn: "root" });
         return BsDatepickerConfig;
     }());
     if (false) {
@@ -278,11 +313,21 @@
          * @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 {?}
@@ -367,6 +412,11 @@
          * @type {?}
          */
         BsDatepickerConfig.prototype.ranges;
+        /**
+         * Max Date Range in days
+         * @type {?}
+         */
+        BsDatepickerConfig.prototype.maxDateRange;
         /** @type {?} */
         BsDatepickerConfig.prototype.monthTitle;
         /** @type {?} */
@@ -379,8 +429,64 @@
         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 = animations.trigger('datepickerAnimation', [
+        animations.state('animated-down', animations.style({ height: '*', overflow: 'hidden' })),
+        animations.transition('* => animated-down', [
+            animations.style({ height: 0, overflow: 'hidden' }),
+            animations.animate(DATEPICKER_ANIMATION_TIMING)
+        ]),
+        animations.state('animated-up', animations.style({ height: '*', overflow: 'hidden' })),
+        animations.transition('* => animated-up', [
+            animations.style({ height: '*', overflow: 'hidden' }),
+            animations.animate(DATEPICKER_ANIMATION_TIMING)
+        ]),
+        animations.transition('* => unanimated', animations.animate('0s'))
+    ]);
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -394,6 +500,7 @@
     BsDatepickerAbstractComponent = /** @class */ (function () {
         function BsDatepickerAbstractComponent() {
             this.customRanges = [];
+            this.chosenRange = [];
         }
         Object.defineProperty(BsDatepickerAbstractComponent.prototype, "minDate", {
             set: /**
@@ -472,6 +579,17 @@
             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 {?}
@@ -553,6 +671,29 @@
          * @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 */
         /**
@@ -575,10 +716,26 @@
         /** @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;
@@ -824,6 +981,20 @@
                 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 {?}
@@ -854,6 +1025,7 @@
         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 = [
@@ -895,6 +1067,8 @@
         /** @type {?} */
         BsDatepickerActions.SET_DATE_CUSTOM_CLASSES;
         /** @type {?} */
+        BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS;
+        /** @type {?} */
         BsDatepickerActions.SET_LOCALE;
         /** @type {?} */
         BsDatepickerActions.SELECT_RANGE;
@@ -1108,6 +1282,18 @@
             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 */
         /**
@@ -1244,37 +1430,6 @@
             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: chronos.getMonth(event.date),
-                        year: chronos.getFullYear(event.date)
-                    },
-                    viewMode: 'day'
-                }));
-            });
-            container.yearSelectHandler = (/**
-             * @param {?} event
-             * @return {?}
-             */
-            function (event) {
-                if (event.isDisabled) {
-                    return;
-                }
-                _this._store.dispatch(_this._actions.navigateTo({
-                    unit: {
-                        year: chronos.getFullYear(event.date)
-                    },
-                    viewMode: 'month'
-                }));
-            });
             return this;
         };
         /**
@@ -1425,6 +1580,23 @@
              * @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(operators.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((/**
@@ -1552,6 +1724,8 @@
         /** @type {?} */
         BsDatepickerState.prototype.dateCustomClasses;
         /** @type {?} */
+        BsDatepickerState.prototype.dateTooltipTexts;
+        /** @type {?} */
         BsDatepickerState.prototype.hoveredDate;
         /** @type {?} */
         BsDatepickerState.prototype.hoveredMonth;
@@ -1878,6 +2052,8 @@
         FlagDaysCalendarOptions.prototype.monthIndex;
         /** @type {?} */
         FlagDaysCalendarOptions.prototype.dateCustomClasses;
+        /** @type {?} */
+        FlagDaysCalendarOptions.prototype.dateTooltipTexts;
     }
     /**
      * @param {?} formattedMonth
@@ -1945,6 +2121,21 @@
                 function (previousValue, currentValue) { return previousValue.concat(currentValue); }), [])
                     .join(' ')
                     || '';
+                /** @type {?} */
+                var tooltipText = options.dateTooltipTexts && options.dateTooltipTexts
+                    .map((/**
+                 * @param {?} tt
+                 * @return {?}
+                 */
+                function (tt) { return chronos.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, {
@@ -1956,7 +2147,8 @@
                     isInRange: isInRange,
                     isDisabled: isDisabled,
                     isToday: isToday,
-                    customClasses: customClasses
+                    customClasses: customClasses,
+                    tooltipText: tooltipText
                 });
                 if (day.isOtherMonth !== newDay.isOtherMonth ||
                     day.isHovered !== newDay.isHovered ||
@@ -1965,7 +2157,8 @@
                     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;
                 }
             }));
@@ -2070,6 +2263,8 @@
         /** @type {?} */
         FlagMonthCalendarOptions.prototype.selectedDate;
         /** @type {?} */
+        FlagMonthCalendarOptions.prototype.selectedRange;
+        /** @type {?} */
         FlagMonthCalendarOptions.prototype.displayMonths;
         /** @type {?} */
         FlagMonthCalendarOptions.prototype.monthIndex;
@@ -2092,13 +2287,22 @@
              * @return {?}
              */
             function (month, monthIndex) {
+                /** @type {?} */
+                var isSelected;
                 /** @type {?} */
                 var isHovered = chronos.isSameMonth(month.date, options.hoveredMonth);
                 /** @type {?} */
                 var isDisabled = options.isDisabled ||
                     isMonthDisabled(month.date, options.minDate, options.maxDate);
-                /** @type {?} */
-                var isSelected = chronos.isSameMonth(month.date, options.selectedDate);
+                if (!options.selectedDate && options.selectedRange) {
+                    isSelected = chronos.isSameMonth(month.date, options.selectedRange[0]);
+                    if (!isSelected) {
+                        isSelected = chronos.isSameMonth(month.date, options.selectedRange[1]);
+                    }
+                }
+                else {
+                    isSelected = chronos.isSameMonth(month.date, options.selectedDate);
+                }
                 /** @type {?} */
                 var newMonth = Object.assign(/*{},*/ month, {
                     isHovered: isHovered,
@@ -2211,6 +2415,8 @@
         /** @type {?} */
         FlagYearsCalendarOptions.prototype.selectedDate;
         /** @type {?} */
+        FlagYearsCalendarOptions.prototype.selectedRange;
+        /** @type {?} */
         FlagYearsCalendarOptions.prototype.displayMonths;
         /** @type {?} */
         FlagYearsCalendarOptions.prototype.yearIndex;
@@ -2233,13 +2439,22 @@
              * @return {?}
              */
             function (year, yearIndex) {
+                /** @type {?} */
+                var isSelected;
                 /** @type {?} */
                 var isHovered = chronos.isSameYear(year.date, options.hoveredYear);
                 /** @type {?} */
                 var isDisabled = options.isDisabled ||
                     isYearDisabled(year.date, options.minDate, options.maxDate);
-                /** @type {?} */
-                var isSelected = chronos.isSameYear(year.date, options.selectedDate);
+                if (!options.selectedDate && options.selectedRange) {
+                    isSelected = chronos.isSameYear(year.date, options.selectedRange[0]);
+                    if (!isSelected) {
+                        isSelected = chronos.isSameYear(year.date, options.selectedRange[1]);
+                    }
+                }
+                else {
+                    isSelected = chronos.isSameYear(year.date, options.selectedDate);
+                }
                 /** @type {?} */
                 var newMonth = Object.assign(/*{},*/ year, { isHovered: isHovered, isDisabled: isDisabled, isSelected: isSelected });
                 if (year.isHovered !== newMonth.isHovered ||
@@ -2402,6 +2617,11 @@
                     dateCustomClasses: action.payload
                 });
             }
+            case BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS: {
+                return Object.assign({}, state, {
+                    dateTooltipTexts: action.payload
+                });
+            }
             default:
                 return state;
         }
@@ -2419,7 +2639,7 @@
         /** @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 = chronos.shiftDate(viewDate, { month: -1 });
             }
             state.monthViewOptions.firstDayOfWeek = chronos.getLocale(state.locale).firstDayOfWeek();
@@ -2529,6 +2749,7 @@
                     selectedRange: state.selectedRange,
                     displayMonths: displayMonths,
                     dateCustomClasses: state.dateCustomClasses,
+                    dateTooltipTexts: state.dateTooltipTexts,
                     monthIndex: monthIndex
                 });
             }));
@@ -2548,6 +2769,7 @@
                     maxDate: state.maxDate,
                     hoveredMonth: state.hoveredMonth,
                     selectedDate: state.selectedDate,
+                    selectedRange: state.selectedRange,
                     displayMonths: displayMonths,
                     monthIndex: monthIndex
                 });
@@ -2568,6 +2790,7 @@
                     maxDate: state.maxDate,
                     hoveredYear: state.hoveredYear,
                     selectedDate: state.selectedDate,
+                    selectedRange: state.selectedRange,
                     displayMonths: displayMonths,
                     yearIndex: yearIndex
                 });
@@ -2683,27 +2906,6 @@
         return BsDatepickerStore;
     }(miniNgrx.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 = animations.trigger('datepickerAnimation', [
-        animations.state('animated-down', animations.style({ height: '*', overflow: 'hidden' })),
-        animations.transition('* => animated-down', [
-            animations.style({ height: 0, overflow: 'hidden' }),
-            animations.animate(DATEPICKER_ANIMATION_TIMING)
-        ]),
-        animations.state('animated-up', animations.style({ height: '*', overflow: 'hidden' })),
-        animations.transition('* => animated-up', [
-            animations.style({ height: '*', overflow: 'hidden' }),
-            animations.animate(DATEPICKER_ANIMATION_TIMING)
-        ]),
-        animations.transition('* => unanimated', animations.animate('0s'))
-    ]);
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2763,6 +2965,13 @@
             }));
             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
@@ -2787,6 +2996,7 @@
              * @return {?}
              */
             function (date) { return _this.valueChange.emit(date); })));
+            this._store.dispatch(this._actions.changeViewMode(this._config.startView));
         };
         Object.defineProperty(BsDatepickerContainerComponent.prototype, "isTopPosition", {
             get: /**
@@ -2826,6 +3036,63 @@
             }
             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: chronos.getMonth(day.date),
+                    year: chronos.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: chronos.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 {?}
          */
@@ -2853,7 +3120,7 @@
             { type: core.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)',
@@ -2941,6 +3208,7 @@
              */
             this.bsValueChange = new core.EventEmitter();
             this._subs = [];
+            this._dateInputFormat$ = new rxjs.Subject();
             // todo: assign only subset of fields
             Object.assign(this, this._config);
             this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
@@ -2988,6 +3256,39 @@
             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 {?}
          */
@@ -3041,6 +3342,9 @@
             if (changes.dateCustomClasses) {
                 this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
             }
+            if (changes.dateTooltipTexts) {
+                this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
+            }
         };
         /**
          * @return {?}
@@ -3179,6 +3483,7 @@
                 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
@@ -3231,6 +3536,7 @@
             datesDisabled: [{ type: core.Input }],
             datesEnabled: [{ type: core.Input }],
             dateCustomClasses: [{ type: core.Input }],
+            dateTooltipTexts: [{ type: core.Input }],
             bsValueChange: [{ type: core.Output }]
         };
         return BsDatepickerDirective;
@@ -3275,11 +3581,6 @@
         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 {?}
@@ -3320,6 +3621,11 @@
          * @type {?}
          */
         BsDatepickerDirective.prototype.dateCustomClasses;
+        /**
+         * Date tooltip text
+         * @type {?}
+         */
+        BsDatepickerDirective.prototype.dateTooltipTexts;
         /**
          * Emits when datepicker value has been changed
          * @type {?}
@@ -3340,6 +3646,16 @@
          * @private
          */
         BsDatepickerDirective.prototype._datepickerRef;
+        /**
+         * @type {?}
+         * @private
+         */
+        BsDatepickerDirective.prototype._bsConfig;
+        /**
+         * @type {?}
+         * @private
+         */
+        BsDatepickerDirective.prototype._dateInputFormat$;
         /** @type {?} */
         BsDatepickerDirective.prototype._config;
         /**
@@ -3364,8 +3680,11 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         BsDatepickerInlineConfig.decorators = [
-            { type: core.Injectable }
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
         ];
+        /** @nocollapse */ BsDatepickerInlineConfig.ɵprov = core["ɵɵdefineInjectable"]({ factory: function BsDatepickerInlineConfig_Factory() { return new BsDatepickerInlineConfig(); }, token: BsDatepickerInlineConfig, providedIn: "root" });
         return BsDatepickerInlineConfig;
     }(BsDatepickerConfig));
 
@@ -3385,7 +3704,7 @@
             { type: core.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)'
                         },
@@ -3503,6 +3822,10 @@
                 this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
                 this.setConfig();
             }
+            if (changes.dateTooltipTexts) {
+                this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
+                this.setConfig();
+            }
         };
         /**
          * Set config for datepicker
@@ -3525,6 +3848,7 @@
                 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
             });
@@ -3564,6 +3888,7 @@
             minDate: [{ type: core.Input }],
             maxDate: [{ type: core.Input }],
             dateCustomClasses: [{ type: core.Input }],
+            dateTooltipTexts: [{ type: core.Input }],
             datesEnabled: [{ type: core.Input }],
             datesDisabled: [{ type: core.Input }],
             bsValueChange: [{ type: core.Output }]
@@ -3598,6 +3923,11 @@
          * @type {?}
          */
         BsDatepickerInlineDirective.prototype.dateCustomClasses;
+        /**
+         * Date tooltip text
+         * @type {?}
+         */
+        BsDatepickerInlineDirective.prototype.dateTooltipTexts;
         /**
          * Disable specific dates
          * @type {?}
@@ -3654,8 +3984,11 @@
             return _this;
         }
         BsDaterangepickerInlineConfig.decorators = [
-            { type: core.Injectable }
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
         ];
+        /** @nocollapse */ BsDaterangepickerInlineConfig.ɵprov = core["ɵɵdefineInjectable"]({ factory: function BsDaterangepickerInlineConfig_Factory() { return new BsDaterangepickerInlineConfig(); }, token: BsDaterangepickerInlineConfig, providedIn: "root" });
         return BsDaterangepickerInlineConfig;
     }(BsDatepickerConfig));
     if (false) {
@@ -3688,6 +4021,7 @@
             _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;
@@ -3793,6 +4127,72 @@
             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: chronos.getMonth(day.date),
+                        year: chronos.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: chronos.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
@@ -3806,6 +4206,9 @@
             }
             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) {
@@ -3847,11 +4250,25 @@
             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: core.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)',
@@ -3927,7 +4344,7 @@
             { type: core.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)'
                         },
@@ -4079,7 +4496,8 @@
                 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 })
@@ -4253,6 +4671,13 @@
             function () {
                 _this._setInputValue(_this._value);
             }));
+            // update input value on format change
+            this._picker.dateInputFormat$.pipe(operators.distinctUntilChanged()).subscribe((/**
+             * @return {?}
+             */
+            function () {
+                _this._setInputValue(_this._value);
+            }));
         }
         /**
          * @param {?} event
@@ -4510,8 +4935,11 @@
             return _this;
         }
         BsDaterangepickerConfig.decorators = [
-            { type: core.Injectable }
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
         ];
+        /** @nocollapse */ BsDaterangepickerConfig.ɵprov = core["ɵɵdefineInjectable"]({ factory: function BsDaterangepickerConfig_Factory() { return new BsDaterangepickerConfig(); }, token: BsDaterangepickerConfig, providedIn: "root" });
         return BsDaterangepickerConfig;
     }(BsDatepickerConfig));
     if (false) {
@@ -4551,6 +4979,7 @@
              */
             this.bsValueChange = new core.EventEmitter();
             this._subs = [];
+            this._rangeInputFormat$ = new rxjs.Subject();
             this._datepicker = cis.createLoader(_elementRef, _viewContainerRef, _renderer);
             Object.assign(this, _config);
             this.onShown = this._datepicker.onShown;
@@ -4597,6 +5026,39 @@
             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 {?}
          */
@@ -4740,7 +5202,8 @@
                 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
             });
         };
         /**
@@ -4889,11 +5352,6 @@
         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 {?}
@@ -4949,6 +5407,16 @@
          * @private
          */
         BsDaterangepickerDirective.prototype._datepickerRef;
+        /**
+         * @type {?}
+         * @private
+         */
+        BsDaterangepickerDirective.prototype._bsConfig;
+        /**
+         * @type {?}
+         * @private
+         */
+        BsDaterangepickerDirective.prototype._rangeInputFormat$;
         /** @type {?} */
         BsDaterangepickerDirective.prototype._config;
         /**
@@ -5020,6 +5488,13 @@
             function () {
                 _this._setInputValue(_this._value);
             }));
+            // update input value on format change
+            this._picker.rangeInputFormat$.pipe(operators.distinctUntilChanged()).subscribe((/**
+             * @return {?}
+             */
+            function () {
+                _this._setInputValue(_this._value);
+            }));
         }
         /**
          * @param {?} event
@@ -5166,9 +5641,9 @@
                  */
                 function (_val) {
                     if (_this._picker._config.useUtc) {
-                        return chronos.utcAsLocal(chronos.parseDate(_val, _this._picker._config.dateInputFormat, _this._localeService.currentLocale));
+                        return chronos.utcAsLocal(chronos.parseDate(_val, _this._picker._config.rangeInputFormat, _this._localeService.currentLocale));
                     }
-                    return chronos.parseDate(_val, _this._picker._config.dateInputFormat, _this._localeService.currentLocale);
+                    return chronos.parseDate(_val, _this._picker._config.rangeInputFormat, _this._localeService.currentLocale);
                 }))
                     .map((/**
                  * @param {?} date
@@ -5400,13 +5875,14 @@
         BsCustomDatesViewComponent.decorators = [
             { type: core.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: core.ChangeDetectionStrategy.OnPush
                     }] }
         ];
         BsCustomDatesViewComponent.propDecorators = {
             ranges: [{ type: core.Input }],
             selectedRange: [{ type: core.Input }],
+            customRangeLabel: [{ type: core.Input }],
             onSelect: [{ type: core.Output }]
         };
         return BsCustomDatesViewComponent;
@@ -5417,6 +5893,8 @@
         /** @type {?} */
         BsCustomDatesViewComponent.prototype.selectedRange;
         /** @type {?} */
+        BsCustomDatesViewComponent.prototype.customRangeLabel;
+        /** @type {?} */
         BsCustomDatesViewComponent.prototype.onSelect;
         /** @type {?} */
         BsCustomDatesViewComponent.prototype.customRange;
@@ -5567,6 +6045,8 @@
         /** @type {?|undefined} */
         DayViewModel.prototype.customClasses;
         /** @type {?|undefined} */
+        DayViewModel.prototype.tooltipText;
+        /** @type {?|undefined} */
         DayViewModel.prototype.monthIndex;
         /** @type {?|undefined} */
         DayViewModel.prototype.weekIndex;
@@ -5680,6 +6160,16 @@
         /** @type {?} */
         DatepickerDateCustomClasses.prototype.classes;
     }
+    /**
+     * @record
+     */
+    function DatepickerDateTooltipText() { }
+    if (false) {
+        /** @type {?} */
+        DatepickerDateTooltipText.prototype.date;
+        /** @type {?} */
+        DatepickerDateTooltipText.prototype.tooltipText;
+    }
     /** @enum {number} */
     var BsNavigationDirection = {
         UP: 0,
@@ -5784,6 +6274,11 @@
             this.onSelect = new core.EventEmitter();
             this.onHover = new core.EventEmitter();
             this.onHoverWeek = new core.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
@@ -5914,13 +6409,26 @@
             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 (chronos.isSameDay(dateData.date, cell.date)) {
+                        cell.tooltipText = dateData.tooltipText;
+                        return;
+                    }
+                }));
+            }
             this.onHover.emit({ cell: cell, isHovered: isHovered });
         };
         BsDaysCalendarViewComponent.decorators = [
             { type: core.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 */
@@ -5955,6 +6463,10 @@
         BsDaysCalendarViewComponent.prototype.onHoverWeek;
         /** @type {?} */
         BsDaysCalendarViewComponent.prototype.isWeekHovered;
+        /** @type {?} */
+        BsDaysCalendarViewComponent.prototype.isiOS;
+        /** @type {?} */
+        BsDaysCalendarViewComponent.prototype.isShowTooltip;
         /**
          * @type {?}
          * @private
@@ -6184,10 +6696,6 @@
                     positioning.PositioningService,
                     BsDatepickerStore,
                     BsDatepickerActions,
-                    BsDatepickerConfig,
-                    BsDaterangepickerConfig,
-                    BsDatepickerInlineConfig,
-                    BsDaterangepickerInlineConfig,
                     BsDatepickerEffects,
                     BsLocaleService
                 ]
@@ -6195,7 +6703,7 @@
         };
         BsDatepickerModule.decorators = [
             { type: core.NgModule, args: [{
-                        imports: [common.CommonModule],
+                        imports: [common.CommonModule, tooltip.TooltipModule.forRoot()],
                         declarations: [
                             BsCalendarLayoutComponent,
                             BsCurrentDateViewComponent,
@@ -6912,8 +7420,11 @@
             this.shortcutPropagation = false;
         }
         DatepickerConfig.decorators = [
-            { type: core.Injectable }
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
         ];
+        /** @nocollapse */ DatepickerConfig.ɵprov = core["ɵɵdefineInjectable"]({ factory: function DatepickerConfig_Factory() { return new DatepickerConfig(); }, token: DatepickerConfig, providedIn: "root" });
         return DatepickerConfig;
     }());
     if (false) {