ngx-bootstrap 5.6.1 → 6.2.0

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

@@ -1,13 +1,14 @@
-import { Injectable, EventEmitter, Component, Renderer2, ElementRef, Directive, ViewContainerRef, Input, Output, forwardRef, Host, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, ViewChild } from '@angular/core';
-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 { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
+import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, Renderer2, ElementRef, Directive, ViewContainerRef, Input, Output, forwardRef, Host, ChangeDetectorRef, ChangeDetectionStrategy, NgModule, ViewChild } from '@angular/core';
+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 { MiniStore, MiniState } 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';
 
 /**
@@ -32,6 +33,10 @@ class BsDatepickerConfig {
          * 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
          */
@@ -61,11 +66,42 @@ class BsDatepickerConfig {
         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" });
 if (false) {
     /**
      * sets use adaptive position
@@ -96,11 +132,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 {?}
@@ -185,6 +231,11 @@ if (false) {
      * @type {?}
      */
     BsDatepickerConfig.prototype.ranges;
+    /**
+     * Max Date Range in days
+     * @type {?}
+     */
+    BsDatepickerConfig.prototype.maxDateRange;
     /** @type {?} */
     BsDatepickerConfig.prototype.monthTitle;
     /** @type {?} */
@@ -197,8 +248,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 {?} */
+const DATEPICKER_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)';
+/** @type {?} */
+const 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
@@ -209,6 +316,7 @@ if (false) {
 class BsDatepickerAbstractComponent {
     constructor() {
         this.customRanges = [];
+        this.chosenRange = [];
     }
     /**
      * @param {?} value
@@ -259,6 +367,13 @@ class BsDatepickerAbstractComponent {
     set dateCustomClasses(value) {
         this._effects.setDateCustomClasses(value);
     }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set dateTooltipTexts(value) {
+        this._effects.setDateTooltipTexts(value);
+    }
     /**
      * @param {?} event
      * @return {?}
@@ -304,6 +419,19 @@ class BsDatepickerAbstractComponent {
      * @return {?}
      */
     yearSelectHandler(event) { }
+    /**
+     * @param {?} dates
+     * @return {?}
+     */
+    setRangeOnCalendar(dates) { }
+    /**
+     * @return {?}
+     */
+    setToday() { }
+    /**
+     * @return {?}
+     */
+    clearDate() { }
     /* tslint:disable-next-line: no-any */
     /**
      * @param {?} event
@@ -319,10 +447,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;
@@ -498,6 +642,16 @@ class BsDatepickerActions {
             payload: value
         };
     }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    setDateTooltipTexts(value) {
+        return {
+            type: BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS,
+            payload: value
+        };
+    }
     /**
      * @param {?} locale
      * @return {?}
@@ -525,6 +679,7 @@ BsDatepickerActions.SET_DATESDISABLED = '[datepicker] set dates disabled';
 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 = [
@@ -564,6 +719,8 @@ if (false) {
     /** @type {?} */
     BsDatepickerActions.SET_DATE_CUSTOM_CLASSES;
     /** @type {?} */
+    BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS;
+    /** @type {?} */
     BsDatepickerActions.SET_LOCALE;
     /** @type {?} */
     BsDatepickerActions.SELECT_RANGE;
@@ -722,6 +879,14 @@ class BsDatepickerEffects {
         this._store.dispatch(this._actions.setDateCustomClasses(value));
         return this;
     }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    setDateTooltipTexts(value) {
+        this._store.dispatch(this._actions.setDateTooltipTexts(value));
+        return this;
+    }
     /* Set rendering options */
     /**
      * @param {?} _config
@@ -839,37 +1004,6 @@ class BsDatepickerEffects {
         (event) => {
             event.cell.isHovered = event.isHovered;
         });
-        container.monthSelectHandler = (/**
-         * @param {?} event
-         * @return {?}
-         */
-        (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 {?}
-         */
-        (event) => {
-            if (event.isDisabled) {
-                return;
-            }
-            this._store.dispatch(this._actions.navigateTo({
-                unit: {
-                    year: getFullYear(event.date)
-                },
-                viewMode: 'month'
-            }));
-        });
         return this;
     }
     /**
@@ -1016,6 +1150,23 @@ class BsDatepickerEffects {
          * @return {?}
          */
         dateCustomClasses => this._store.dispatch(this._actions.flag()))));
+        // date tooltip texts
+        this._subs.push(this._store
+            .select((/**
+         * @param {?} state
+         * @return {?}
+         */
+        state => state.dateTooltipTexts))
+            .pipe(filter((/**
+         * @param {?} dateTooltipTexts
+         * @return {?}
+         */
+        dateTooltipTexts => !!dateTooltipTexts)))
+            .subscribe((/**
+         * @param {?} dateTooltipTexts
+         * @return {?}
+         */
+        dateTooltipTexts => this._store.dispatch(this._actions.flag()))));
         // on locale change
         this._subs.push(this._localeService.localeChange
             .subscribe((/**
@@ -1125,6 +1276,8 @@ if (false) {
     /** @type {?} */
     BsDatepickerState.prototype.dateCustomClasses;
     /** @type {?} */
+    BsDatepickerState.prototype.dateTooltipTexts;
+    /** @type {?} */
     BsDatepickerState.prototype.hoveredDate;
     /** @type {?} */
     BsDatepickerState.prototype.hoveredMonth;
@@ -1450,6 +1603,8 @@ if (false) {
     FlagDaysCalendarOptions.prototype.monthIndex;
     /** @type {?} */
     FlagDaysCalendarOptions.prototype.dateCustomClasses;
+    /** @type {?} */
+    FlagDaysCalendarOptions.prototype.dateTooltipTexts;
 }
 /**
  * @param {?} formattedMonth
@@ -1517,6 +1672,21 @@ function flagDaysCalendar(formattedMonth, options) {
             (previousValue, currentValue) => previousValue.concat(currentValue)), [])
                 .join(' ')
                 || '';
+            /** @type {?} */
+            const tooltipText = options.dateTooltipTexts && options.dateTooltipTexts
+                .map((/**
+             * @param {?} tt
+             * @return {?}
+             */
+            tt => isSameDay(day.date, tt.date) ? tt.tooltipText : ''))
+                .reduce((/**
+             * @param {?} previousValue
+             * @param {?} currentValue
+             * @return {?}
+             */
+            (previousValue, currentValue) => previousValue.concat(currentValue)), [])
+                .join(' ')
+                || '';
             // decide update or not
             /** @type {?} */
             const newDay = Object.assign({}, day, {
@@ -1528,7 +1698,8 @@ function flagDaysCalendar(formattedMonth, options) {
                 isInRange,
                 isDisabled,
                 isToday,
-                customClasses
+                customClasses,
+                tooltipText
             });
             if (day.isOtherMonth !== newDay.isOtherMonth ||
                 day.isHovered !== newDay.isHovered ||
@@ -1537,7 +1708,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;
             }
         }));
@@ -1642,6 +1814,8 @@ if (false) {
     /** @type {?} */
     FlagMonthCalendarOptions.prototype.selectedDate;
     /** @type {?} */
+    FlagMonthCalendarOptions.prototype.selectedRange;
+    /** @type {?} */
     FlagMonthCalendarOptions.prototype.displayMonths;
     /** @type {?} */
     FlagMonthCalendarOptions.prototype.monthIndex;
@@ -1664,13 +1838,22 @@ function flagMonthsCalendar(monthCalendar, options) {
          * @return {?}
          */
         (month, monthIndex) => {
+            /** @type {?} */
+            let isSelected;
             /** @type {?} */
             const isHovered = isSameMonth(month.date, options.hoveredMonth);
             /** @type {?} */
             const isDisabled = options.isDisabled ||
                 isMonthDisabled(month.date, options.minDate, options.maxDate);
-            /** @type {?} */
-            const 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 {?} */
             const newMonth = Object.assign(/*{},*/ month, {
                 isHovered,
@@ -1783,6 +1966,8 @@ if (false) {
     /** @type {?} */
     FlagYearsCalendarOptions.prototype.selectedDate;
     /** @type {?} */
+    FlagYearsCalendarOptions.prototype.selectedRange;
+    /** @type {?} */
     FlagYearsCalendarOptions.prototype.displayMonths;
     /** @type {?} */
     FlagYearsCalendarOptions.prototype.yearIndex;
@@ -1805,13 +1990,22 @@ function flagYearsCalendar(yearsCalendar, options) {
          * @return {?}
          */
         (year, yearIndex) => {
+            /** @type {?} */
+            let isSelected;
             /** @type {?} */
             const isHovered = isSameYear(year.date, options.hoveredYear);
             /** @type {?} */
             const isDisabled = options.isDisabled ||
                 isYearDisabled(year.date, options.minDate, options.maxDate);
-            /** @type {?} */
-            const 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 {?} */
             const newMonth = Object.assign(/*{},*/ year, { isHovered, isDisabled, isSelected });
             if (year.isHovered !== newMonth.isHovered ||
@@ -1973,6 +2167,11 @@ function bsDatepickerReducer(state = initialDatepickerState, action) {
                 dateCustomClasses: action.payload
             });
         }
+        case BsDatepickerActions.SET_DATE_TOOLTIP_TEXTS: {
+            return Object.assign({}, state, {
+                dateTooltipTexts: action.payload
+            });
+        }
         default:
             return state;
     }
@@ -1990,7 +2189,7 @@ function calculateReducer(state) {
     /** @type {?} */
     let 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();
@@ -2097,6 +2296,7 @@ function flagReducer(state, action) {
             selectedRange: state.selectedRange,
             displayMonths,
             dateCustomClasses: state.dateCustomClasses,
+            dateTooltipTexts: state.dateTooltipTexts,
             monthIndex
         })));
         return Object.assign({}, state, { flaggedMonths });
@@ -2114,6 +2314,7 @@ function flagReducer(state, action) {
             maxDate: state.maxDate,
             hoveredMonth: state.hoveredMonth,
             selectedDate: state.selectedDate,
+            selectedRange: state.selectedRange,
             displayMonths,
             monthIndex
         })));
@@ -2132,6 +2333,7 @@ function flagReducer(state, action) {
             maxDate: state.maxDate,
             hoveredYear: state.hoveredYear,
             selectedDate: state.selectedDate,
+            selectedRange: state.selectedRange,
             displayMonths,
             yearIndex
         })));
@@ -2242,27 +2444,6 @@ BsDatepickerStore.decorators = [
 /** @nocollapse */
 BsDatepickerStore.ctorParameters = () => [];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const DATEPICKER_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)';
-/** @type {?} */
-const 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
@@ -2321,6 +2502,13 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
         }));
         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
@@ -2345,6 +2533,7 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
          * @return {?}
          */
         (date) => this.valueChange.emit(date))));
+        this._store.dispatch(this._actions.changeViewMode(this._config.startView));
     }
     /**
      * @return {?}
@@ -2373,6 +2562,49 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
         }
         this._store.dispatch(this._actions.select(day.date));
     }
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    monthSelectHandler(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 {?}
+     */
+    yearSelectHandler(day) {
+        if (!day || day.isDisabled) {
+            return;
+        }
+        this._store.dispatch(this._actions.navigateTo({
+            unit: {
+                year: getFullYear(day.date)
+            },
+            viewMode: 'month'
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    setToday() {
+        this._store.dispatch(this._actions.select(new Date()));
+    }
+    /**
+     * @return {?}
+     */
+    clearDate() {
+        this._store.dispatch(this._actions.select(undefined));
+    }
     /**
      * @return {?}
      */
@@ -2387,7 +2619,7 @@ BsDatepickerContainerComponent.decorators = [
     { 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)',
@@ -2480,6 +2712,7 @@ class BsDatepickerDirective {
          */
         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);
@@ -2513,6 +2746,28 @@ class BsDatepickerDirective {
         this._bsValue = value;
         this.bsValueChange.emit(value);
     }
+    /**
+     * Config object for datepicker
+     * @param {?} bsConfig
+     * @return {?}
+     */
+    set bsConfig(bsConfig) {
+        this._bsConfig = bsConfig;
+        this.setConfig();
+        this._dateInputFormat$.next(bsConfig && bsConfig.dateInputFormat);
+    }
+    /**
+     * @return {?}
+     */
+    get bsConfig() {
+        return this._bsConfig;
+    }
+    /**
+     * @return {?}
+     */
+    get dateInputFormat$() {
+        return this._dateInputFormat$;
+    }
     /**
      * @return {?}
      */
@@ -2558,6 +2813,9 @@ class BsDatepickerDirective {
         if (changes.dateCustomClasses) {
             this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
         }
+        if (changes.dateTooltipTexts) {
+            this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
+        }
     }
     /**
      * @return {?}
@@ -2646,6 +2904,7 @@ class BsDatepickerDirective {
             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
@@ -2696,6 +2955,7 @@ BsDatepickerDirective.propDecorators = {
     datesDisabled: [{ type: Input }],
     datesEnabled: [{ type: Input }],
     dateCustomClasses: [{ type: Input }],
+    dateTooltipTexts: [{ type: Input }],
     bsValueChange: [{ type: Output }]
 };
 if (false) {
@@ -2738,11 +2998,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 {?}
@@ -2783,6 +3038,11 @@ if (false) {
      * @type {?}
      */
     BsDatepickerDirective.prototype.dateCustomClasses;
+    /**
+     * Date tooltip text
+     * @type {?}
+     */
+    BsDatepickerDirective.prototype.dateTooltipTexts;
     /**
      * Emits when datepicker value has been changed
      * @type {?}
@@ -2803,6 +3063,16 @@ if (false) {
      * @private
      */
     BsDatepickerDirective.prototype._datepickerRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDatepickerDirective.prototype._bsConfig;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDatepickerDirective.prototype._dateInputFormat$;
     /** @type {?} */
     BsDatepickerDirective.prototype._config;
     /**
@@ -2824,8 +3094,11 @@ if (false) {
 class BsDatepickerInlineConfig extends BsDatepickerConfig {
 }
 BsDatepickerInlineConfig.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
+/** @nocollapse */ BsDatepickerInlineConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDatepickerInlineConfig_Factory() { return new BsDatepickerInlineConfig(); }, token: BsDatepickerInlineConfig, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
@@ -2851,7 +3124,7 @@ BsDatepickerInlineContainerComponent.decorators = [
     { 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)'
                 },
@@ -2959,6 +3232,10 @@ class BsDatepickerInlineDirective {
             this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
             this.setConfig();
         }
+        if (changes.dateTooltipTexts) {
+            this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
+            this.setConfig();
+        }
     }
     /**
      * Set config for datepicker
@@ -2974,6 +3251,7 @@ class BsDatepickerInlineDirective {
             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
         });
@@ -3011,6 +3289,7 @@ BsDatepickerInlineDirective.propDecorators = {
     minDate: [{ type: Input }],
     maxDate: [{ type: Input }],
     dateCustomClasses: [{ type: Input }],
+    dateTooltipTexts: [{ type: Input }],
     datesEnabled: [{ type: Input }],
     datesDisabled: [{ type: Input }],
     bsValueChange: [{ type: Output }]
@@ -3043,6 +3322,11 @@ if (false) {
      * @type {?}
      */
     BsDatepickerInlineDirective.prototype.dateCustomClasses;
+    /**
+     * Date tooltip text
+     * @type {?}
+     */
+    BsDatepickerInlineDirective.prototype.dateTooltipTexts;
     /**
      * Disable specific dates
      * @type {?}
@@ -3098,8 +3382,11 @@ class BsDaterangepickerInlineConfig extends BsDatepickerConfig {
     }
 }
 BsDaterangepickerInlineConfig.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
+/** @nocollapse */ BsDaterangepickerInlineConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDaterangepickerInlineConfig_Factory() { return new BsDaterangepickerInlineConfig(); }, token: BsDaterangepickerInlineConfig, providedIn: "root" });
 if (false) {
     /** @type {?} */
     BsDaterangepickerInlineConfig.prototype.displayMonths;
@@ -3138,6 +3425,7 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
         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');
     }
@@ -3223,6 +3511,60 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
         if (isDisabled) {
             return;
         }
+        this.rangesProcessing(day);
+    }
+    /**
+     * @param {?} day
+     * @return {?}
+     */
+    monthSelectHandler(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 {?}
+     */
+    yearSelectHandler(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 {?}
+     */
+    rangesProcessing(day) {
         // if only one date is already selected
         // and user clicks on previous date
         // start selection from new date
@@ -3236,6 +3578,9 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
         }
         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) {
@@ -3259,12 +3604,22 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
         this._rangeStack = (dates === null) ? [] : (dates.value instanceof Date ? [dates.value] : dates.value);
         this._store.dispatch(this._actions.selectRange(this._rangeStack));
     }
+    /**
+     * @param {?} currentSelection
+     * @return {?}
+     */
+    setMaxDateRangeOnCalendar(currentSelection) {
+        /** @type {?} */
+        const 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)',
@@ -3346,7 +3701,7 @@ BsDaterangepickerInlineContainerComponent.decorators = [
     { 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)'
                 },
@@ -3481,7 +3836,8 @@ class BsDaterangepickerInlineDirective {
             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 })
@@ -3657,6 +4013,13 @@ class BsDatepickerInputDirective {
         () => {
             this._setInputValue(this._value);
         }));
+        // update input value on format change
+        this._picker.dateInputFormat$.pipe(distinctUntilChanged()).subscribe((/**
+         * @return {?}
+         */
+        () => {
+            this._setInputValue(this._value);
+        }));
     }
     /**
      * @param {?} event
@@ -3870,8 +4233,11 @@ class BsDaterangepickerConfig extends BsDatepickerConfig {
     }
 }
 BsDaterangepickerConfig.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
+/** @nocollapse */ BsDaterangepickerConfig.ɵprov = ɵɵdefineInjectable({ factory: function BsDaterangepickerConfig_Factory() { return new BsDaterangepickerConfig(); }, token: BsDaterangepickerConfig, providedIn: "root" });
 if (false) {
     /** @type {?} */
     BsDaterangepickerConfig.prototype.displayMonths;
@@ -3916,6 +4282,7 @@ class BsDaterangepickerDirective {
          */
         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;
@@ -3948,6 +4315,28 @@ class BsDaterangepickerDirective {
         this._bsValue = value;
         this.bsValueChange.emit(value);
     }
+    /**
+     * Config object for daterangepicker
+     * @param {?} bsConfig
+     * @return {?}
+     */
+    set bsConfig(bsConfig) {
+        this._bsConfig = bsConfig;
+        this.setConfig();
+        this._rangeInputFormat$.next(bsConfig && bsConfig.rangeInputFormat);
+    }
+    /**
+     * @return {?}
+     */
+    get bsConfig() {
+        return this._bsConfig;
+    }
+    /**
+     * @return {?}
+     */
+    get rangeInputFormat$() {
+        return this._rangeInputFormat$;
+    }
     /**
      * @return {?}
      */
@@ -4062,7 +4451,8 @@ class BsDaterangepickerDirective {
             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
         });
     }
     /**
@@ -4178,11 +4568,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 {?}
@@ -4238,6 +4623,16 @@ if (false) {
      * @private
      */
     BsDaterangepickerDirective.prototype._datepickerRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDaterangepickerDirective.prototype._bsConfig;
+    /**
+     * @type {?}
+     * @private
+     */
+    BsDaterangepickerDirective.prototype._rangeInputFormat$;
     /** @type {?} */
     BsDaterangepickerDirective.prototype._config;
     /**
@@ -4315,6 +4710,13 @@ class BsDaterangepickerInputDirective {
         () => {
             this._setInputValue(this._value);
         }));
+        // update input value on format change
+        this._picker.rangeInputFormat$.pipe(distinctUntilChanged()).subscribe((/**
+         * @return {?}
+         */
+        () => {
+            this._setInputValue(this._value);
+        }));
     }
     /**
      * @param {?} event
@@ -4436,9 +4838,9 @@ class BsDaterangepickerInputDirective {
              */
             (_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
@@ -4663,7 +5065,7 @@ BsCustomDatesViewComponent.decorators = [
         class="btn"
         (click)="selectFromRanges(customRange)"
         [class.selected]="!checkRange()">
-        Custom Range
+        {{customRangeLabel}}
       </button>
     </div>
   `,
@@ -4673,6 +5075,7 @@ BsCustomDatesViewComponent.decorators = [
 BsCustomDatesViewComponent.propDecorators = {
     ranges: [{ type: Input }],
     selectedRange: [{ type: Input }],
+    customRangeLabel: [{ type: Input }],
     onSelect: [{ type: Output }]
 };
 if (false) {
@@ -4681,6 +5084,8 @@ if (false) {
     /** @type {?} */
     BsCustomDatesViewComponent.prototype.selectedRange;
     /** @type {?} */
+    BsCustomDatesViewComponent.prototype.customRangeLabel;
+    /** @type {?} */
     BsCustomDatesViewComponent.prototype.onSelect;
     /** @type {?} */
     BsCustomDatesViewComponent.prototype.customRange;
@@ -4831,6 +5236,8 @@ if (false) {
     /** @type {?|undefined} */
     DayViewModel.prototype.customClasses;
     /** @type {?|undefined} */
+    DayViewModel.prototype.tooltipText;
+    /** @type {?|undefined} */
     DayViewModel.prototype.monthIndex;
     /** @type {?|undefined} */
     DayViewModel.prototype.weekIndex;
@@ -4944,6 +5351,16 @@ if (false) {
     /** @type {?} */
     DatepickerDateCustomClasses.prototype.classes;
 }
+/**
+ * @record
+ */
+function DatepickerDateTooltipText() { }
+if (false) {
+    /** @type {?} */
+    DatepickerDateTooltipText.prototype.date;
+    /** @type {?} */
+    DatepickerDateTooltipText.prototype.tooltipText;
+}
 /** @enum {number} */
 const BsNavigationDirection = {
     UP: 0,
@@ -5078,6 +5495,11 @@ class BsDaysCalendarViewComponent {
         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
@@ -5180,6 +5602,19 @@ class BsDaysCalendarViewComponent {
         if (this._config.selectFromOtherMonth && cell.isOtherMonth) {
             cell.isOtherMonthHovered = isHovered;
         }
+        if (this._config.dateTooltipTexts) {
+            cell.tooltipText = '';
+            this._config.dateTooltipTexts.forEach((/**
+             * @param {?} dateData
+             * @return {?}
+             */
+            (dateData) => {
+                if (isSameDay(dateData.date, cell.date)) {
+                    cell.tooltipText = dateData.tooltipText;
+                    return;
+                }
+            }));
+        }
         this.onHover.emit({ cell, isHovered });
     }
 }
@@ -5209,17 +5644,32 @@ BsDaysCalendarViewComponent.decorators = [
         <tbody>
         <tr *ngFor="let week of calendar.weeks; let i = index">
           <td class="week" [class.active-week]="isWeekHovered"  *ngIf="options.showWeekNumbers">
-            <span
+            <span *ngIf="isiOS" (click)="selectWeek(week)">{{ calendar.weekNumbers[i] }}</span>
+            <span *ngIf="!isiOS"
                 (click)="selectWeek(week)"
                 (mouseenter)="weekHoverHandler(week, true)"
                 (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }}</span>
           </td>
           <td *ngFor="let day of week.days" role="gridcell">
-          <span bsDatepickerDayDecorator
+
+            <!-- When we want to show tooltips for dates -->
+            <span *ngIf="!isiOS && isShowTooltip" bsDatepickerDayDecorator
                 [day]="day"
                 (click)="selectDay(day)"
+                tooltip="{{day.tooltipText}}"
                 (mouseenter)="hoverDay(day, true)"
-                (mouseleave)="hoverDay(day, false)">{{ day.label }}</span>
+                (mouseleave)="hoverDay(day, false)">{{ day.label }} 3</span>
+            <!-- When tooltips for dates are disabled -->
+            <span *ngIf="!isiOS && !isShowTooltip" bsDatepickerDayDecorator
+                  [day]="day"
+                  (click)="selectDay(day)"
+                  (mouseenter)="hoverDay(day, true)"
+                  (mouseleave)="hoverDay(day, false)">{{ day.label }} 2</span>
+
+            <!-- For mobile iOS view, tooltips are not needed -->
+            <span *ngIf="isiOS" bsDatepickerDayDecorator
+                  [day]="day"
+                  (click)="selectDay(day)">{{ day.label }} 1</span>
           </td>
         </tr>
         </tbody>
@@ -5259,6 +5709,10 @@ if (false) {
     BsDaysCalendarViewComponent.prototype.onHoverWeek;
     /** @type {?} */
     BsDaysCalendarViewComponent.prototype.isWeekHovered;
+    /** @type {?} */
+    BsDaysCalendarViewComponent.prototype.isiOS;
+    /** @type {?} */
+    BsDaysCalendarViewComponent.prototype.isShowTooltip;
     /**
      * @type {?}
      * @private
@@ -5510,10 +5964,6 @@ class BsDatepickerModule {
                 PositioningService,
                 BsDatepickerStore,
                 BsDatepickerActions,
-                BsDatepickerConfig,
-                BsDaterangepickerConfig,
-                BsDatepickerInlineConfig,
-                BsDaterangepickerInlineConfig,
                 BsDatepickerEffects,
                 BsLocaleService
             ]
@@ -5522,7 +5972,7 @@ class BsDatepickerModule {
 }
 BsDatepickerModule.decorators = [
     { type: NgModule, args: [{
-                imports: [CommonModule],
+                imports: [CommonModule, TooltipModule.forRoot()],
                 declarations: [
                     BsCalendarLayoutComponent,
                     BsCurrentDateViewComponent,
@@ -6113,8 +6563,11 @@ class DatepickerConfig {
     }
 }
 DatepickerConfig.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
+/** @nocollapse */ DatepickerConfig.ɵprov = ɵɵdefineInjectable({ factory: function DatepickerConfig_Factory() { return new DatepickerConfig(); }, token: DatepickerConfig, providedIn: "root" });
 if (false) {
     /** @type {?} */
     DatepickerConfig.prototype.locale;