diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts index 9740f3171a..02ac79a4ee 100644 --- a/demo/src/app/components/+datepicker/datepicker-section.list.ts +++ b/demo/src/app/components/+datepicker/datepicker-section.list.ts @@ -310,14 +310,6 @@ export const demoComponentContent: ContentSection[] = [ description: `

You can manage datepicker's options by using its setConfig() method

`, outlet: DemoDatepickerConfigMethodComponent }, - { - title: 'Tooltip for selected dates', - anchor: 'tooltip-for-selected-dates', - component: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts'), - html: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html'), - description: ``, - outlet: DemoDatePickerTooltipToSelectedDates - }, { title: 'Visibility Events', anchor: 'visibility-events', @@ -401,6 +393,14 @@ export const demoComponentContent: ContentSection[] = [ description: `

Style dates with custom classes

`, outlet: DemoDatepickerDateCustomClassesComponent }, + { + title: 'Tooltip for selected dates', + anchor: 'tooltip-for-selected-dates', + component: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts'), + html: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html'), + description: ``, + outlet: DemoDatePickerTooltipToSelectedDates + }, { title: 'Quick select ranges', anchor: 'quick-select-ranges', diff --git a/demo/src/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts b/demo/src/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts index 4ff123fccd..4e71393c01 100644 --- a/demo/src/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts +++ b/demo/src/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts @@ -6,8 +6,8 @@ import { DatepickerDateTooltipText } from 'ngx-bootstrap/datepicker'; templateUrl: './tooltip-to-selected-dates.html' }) export class DemoDatePickerTooltipToSelectedDates { - selectedDates : DatepickerDateTooltipText[] = [{ date: new Date('2020-03-03'), tooltipText: '3rd of March'}, - { date: new Date('2020-03-04'), tooltipText: '4th of March'}, - { date: new Date('2020-03-05'), tooltipText: '5th of March'} + selectedDates : DatepickerDateTooltipText[] = [{ date: new Date('2020-08-08'), tooltipText: '8th of August'}, + { date: new Date('2020-08-09'), tooltipText: '9th of August'}, + { date: new Date('2020-08-07'), tooltipText: '7th of August'} ] } diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts index e8b3797086..a94f07ea59 100644 --- a/src/datepicker/bs-datepicker.component.ts +++ b/src/datepicker/bs-datepicker.component.ts @@ -1,3 +1,4 @@ +// tslint:disable:max-file-line-count import { ComponentRef, Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewContainerRef, AfterViewInit diff --git a/src/datepicker/bs-datepicker.module.ts b/src/datepicker/bs-datepicker.module.ts index 9c9abfa4f3..2218cfbf51 100644 --- a/src/datepicker/bs-datepicker.module.ts +++ b/src/datepicker/bs-datepicker.module.ts @@ -3,6 +3,8 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; import { PositioningService } from 'ngx-bootstrap/positioning'; +import { TooltipModule } from 'ngx-bootstrap/tooltip'; + import { BsDatepickerInputDirective } from './bs-datepicker-input.directive'; import { BsDatepickerDirective } from './bs-datepicker.component'; import { BsDatepickerConfig } from './bs-datepicker.config'; @@ -37,7 +39,7 @@ import { BsTimepickerViewComponent } from './themes/bs/bs-timepicker-view.compon import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view.component'; @NgModule({ - imports: [CommonModule], + imports: [CommonModule, TooltipModule.forRoot()], declarations: [ BsCalendarLayoutComponent, BsCurrentDateViewComponent, diff --git a/src/datepicker/engine/flag-days.calendar.spec.ts b/src/datepicker/engine/flag-days.calendar.spec.ts index 43ff6f944c..86b7ab9c4e 100644 --- a/src/datepicker/engine/flag-days.calendar.spec.ts +++ b/src/datepicker/engine/flag-days.calendar.spec.ts @@ -35,6 +35,7 @@ describe('flag-days-calendar:', () => { selectedRange: [], displayMonths: 1, monthIndex: 1, + dateTooltipTexts: [{date: new Date('2019-03-08'), tooltipText: 'test'}], dateCustomClasses: [] }); @@ -76,6 +77,7 @@ describe('flag-days-calendar:', () => { selectedRange: [], displayMonths: 1, monthIndex: 1, + dateTooltipTexts: [{date: new Date('2019-03-08'), tooltipText: 'test'}], dateCustomClasses: [] }); diff --git a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts index b6949b9a56..085d59cd12 100644 --- a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts +++ b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts @@ -46,9 +46,5 @@ export class BsDatepickerDayDecoratorComponent implements OnInit { this._renderer.addClass(this._elRef.nativeElement, className); }); } - - if (typeof this.day.tooltipText === 'string' && this.day.tooltipText.length > 0) { - this._renderer.setAttribute(this._elRef.nativeElement, 'tooltip', this.day.tooltipText); - } } } diff --git a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts index 8b53b291ab..30a46cd839 100644 --- a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts +++ b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts @@ -5,11 +5,13 @@ import { Output } from '@angular/core'; +import { isSameDay } from 'ngx-bootstrap/chronos'; + import { BsDatepickerViewMode, BsNavigationDirection, BsNavigationEvent, - CellHoverEvent, + CellHoverEvent, DatepickerDateTooltipText, DatepickerRenderOptions, DaysCalendarViewModel, DayViewModel, WeekViewModel @@ -49,14 +51,25 @@ import { BsDatepickerConfig } from '../../bs-datepicker.config'; (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }} - + {{ day.label }} + (mouseleave)="hoverDay(day, false)">{{ day.label }} 3 + + {{ day.label }} 2 + + {{ day.label }} + (click)="selectDay(day)">{{ day.label }} 1 @@ -78,9 +91,13 @@ export class BsDaysCalendarViewComponent { isWeekHovered: boolean; isiOS: boolean; + isShowTooltip: boolean; constructor(private _config: BsDatepickerConfig) { this.isiOS = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + if (this._config.dateTooltipTexts && this._config.dateTooltipTexts.length > 0) { + this.isShowTooltip = true; + } } navigateTo(event: BsNavigationDirection): void { @@ -157,6 +174,18 @@ export class BsDaysCalendarViewComponent { cell.isOtherMonthHovered = isHovered; } + if (this._config.dateTooltipTexts) { + cell.tooltipText = ''; + this._config.dateTooltipTexts.forEach((dateData: DatepickerDateTooltipText) => { + + if (isSameDay(dateData.date, cell.date)) { + cell.tooltipText = dateData.tooltipText; + + return; + } + }); + } + this.onHover.emit({ cell, isHovered }); } }