feat(datepicker): add timepicker support

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -1194,6 +1194,12 @@ export const ngdoc: any = {
         "defaultValue": "false",
         "type": "boolean",
         "description": "<p>sets use UTC date time format</p>\n"
+      },
+      {
+        "name": "withTimepicker",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>Shows timepicker under datepicker</p>\n"
       }
     ]
   },

libs/doc-pages/datepicker/src/lib/datepicker-section.list.ts

@@ -52,6 +52,7 @@ import { DemoDatepickerTodayButtonComponent } from './demos/today-button/today-b
 import { DemoDatepickerClearButtonComponent } from './demos/clear-button/clear-button';
 import { DemoDatepickerStartViewComponent } from "./demos/start-view/start-view";
 import { DemoDatepickerPreventChangeToNextMonthComponent } from './demos/prevent-change-to-next-month/prevent-change-to-next-month.component';
+import { DemoDatepickerWithTimepickerComponent } from './demos/with-timepicker/with-timepicker';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -460,7 +461,15 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Max date range after first date selection can be added to Daterangepicker using <code>maxDateRange</code>.</p>
         <p>If you also use <code>maxDate</code> property, you can't select second date, which exceeds value of <code>maxDate</code>.</p>`,
         outlet: DemoDateRangePickerMaxDateRangeComponent
-      }
+      },
+      {
+        title: 'With timepicker',
+        anchor: 'with-timepicker',
+        component: require('!!raw-loader!./demos/with-timepicker/with-timepicker'),
+        html: require('!!raw-loader!./demos/with-timepicker/with-timepicker.html'),
+        description: `You can enable timepicker via <code>withTimepicker</code> config option`,
+        outlet: DemoDatepickerWithTimepickerComponent
+      },
     ]
   },
   {

libs/doc-pages/datepicker/src/lib/demos/index.ts

@@ -43,6 +43,7 @@ import { DemoDatepickerTodayButtonComponent } from './today-button/today-button'
 import { DemoDatepickerClearButtonComponent } from './clear-button/clear-button';
 import { DemoDatepickerStartViewComponent } from "./start-view/start-view";
 import { DemoDatepickerPreventChangeToNextMonthComponent } from './prevent-change-to-next-month/prevent-change-to-next-month.component';
+import { DemoDatepickerWithTimepickerComponent } from './with-timepicker/with-timepicker';
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
@@ -87,5 +88,6 @@ export const DEMO_COMPONENTS = [
   DemoDateRangePickerMaxDateRangeComponent,
   DemoDatepickerPreventChangeToNextMonthComponent,
   DemoDatePickerQuickSelectRangesComponent,
-  DemoDatepickerStartViewComponent
+  DemoDatepickerStartViewComponent,
+  DemoDatepickerWithTimepickerComponent
 ];

libs/doc-pages/datepicker/src/lib/demos/with-timepicker/with-timepicker.html

@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           [bsConfig]="{withTimepicker: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
+           bsDatepicker>
+  </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           [bsConfig]="{withTimepicker: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
+           bsDaterangepicker>
+  </div>
+</div>

libs/doc-pages/datepicker/src/lib/demos/with-timepicker/with-timepicker.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-datepicker-with-timepicker',
+  templateUrl: './with-timepicker.html'
+})
+
+export class DemoDatepickerWithTimepickerComponent {
+}

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

@@ -34,6 +34,9 @@ export abstract class BsDatepickerAbstractComponent {
 
   multipleCalendars?: boolean;
 
+  isRangePicker?: boolean;
+  withTimepicker?: boolean;
+
   set minDate(value: Date|undefined) {
     this._effects?.setMinDate(value);
   }
@@ -84,6 +87,7 @@ export abstract class BsDatepickerAbstractComponent {
     return this._daysCalendar$;
   }
 
+  selectedTime!: Observable<Date[]|undefined>;
 
   // todo: valorkin fix
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
@@ -104,6 +108,9 @@ export abstract class BsDatepickerAbstractComponent {
   // eslint-disable-next-line
   yearHoverHandler(event: CellHoverEvent): void {}
 
+  // eslint-disable-next-line
+  timeSelectHandler(date: Date, index: number): void {}
+
   // eslint-disable-next-line
   daySelectHandler(day: DayViewModel): void {}
 

src/datepicker/bs-datepicker-inline.component.ts

@@ -95,7 +95,7 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
       return;
     }
 
-    if (!this._bsValue && value) {
+    if (!this._bsValue && value && !this._config.withTimepicker) {
       const now = new Date();
 
       value.setMilliseconds(now.getMilliseconds());

src/datepicker/bs-datepicker.component.ts

@@ -140,7 +140,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
       return;
     }
 
-    if (!this._bsValue && value) {
+    if (!this._bsValue && value && !this._config.withTimepicker) {
       const now = new Date();
 
       value.setMilliseconds(now.getMilliseconds());

src/datepicker/bs-datepicker.config.ts

@@ -174,4 +174,9 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Label for 'custom range' button
    */
   customRangeButtonLabel = 'Custom Range';
+
+  /**
+   * Shows timepicker under datepicker
+   */
+  withTimepicker = false;
 }

src/datepicker/bs-datepicker.module.ts

@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { PositioningService } from 'ngx-bootstrap/positioning';
 
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 
 import { BsDatepickerInputDirective } from './bs-datepicker-input.directive';
 import { BsDatepickerDirective } from './bs-datepicker.component';
@@ -35,7 +37,7 @@ import { BsTimepickerViewComponent } from './themes/bs/bs-timepicker-view.compon
 import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view.component';
 
 @NgModule({
-  imports: [CommonModule, TooltipModule],
+  imports: [CommonModule, TooltipModule, FormsModule, TimepickerModule.forRoot()],
   declarations: [
     BsCalendarLayoutComponent,
     BsCurrentDateViewComponent,

src/datepicker/bs-datepicker.scss

@@ -427,6 +427,11 @@
     }
   }
 
+  .bs-timepicker-in-datepicker-container {
+    display: flex;
+    justify-content: space-around;
+  }
+
   /*.bs-datepicker-custom-range */
   &-custom-range {
     padding: 15px;

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

@@ -31,6 +31,7 @@ export class BsDatepickerActions {
   static readonly SET_DATE_CUSTOM_CLASSES = '[datepicker] set date custom classes';
   static readonly SET_DATE_TOOLTIP_TEXTS = '[datepicker] set date tooltip texts';
   static readonly SET_LOCALE = '[datepicker] set datepicker locale';
+  static readonly SELECT_TIME = '[datepicker] select time';
 
   static readonly SELECT_RANGE = '[daterangepicker] select dates range';
 
@@ -53,6 +54,13 @@ export class BsDatepickerActions {
     };
   }
 
+  selectTime(date: Date, index: number): Action {
+    return  {
+      type: BsDatepickerActions.SELECT_TIME,
+      payload: { date, index },
+    };
+  }
+
   changeViewMode(event: BsDatepickerViewMode): Action {
     return {
       type: BsDatepickerActions.CHANGE_VIEWMODE,

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

@@ -116,6 +116,9 @@ export class BsDatepickerEffects {
       return this;
     }
 
+    container.selectedTime = this._store.select(state => state.selectedTime)
+      .pipe(filter(times => !!times));
+
     container.daysCalendar$ = this._store.select(state => state.flaggedMonths)
       .pipe(filter(months => !!months));
 

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

@@ -89,6 +89,14 @@ export function bsDatepickerReducer(state: BsDatepickerState = initialDatepicker
         view: state.view
       };
 
+      const _time = (state.selectedTime || [])[0];
+      if (_time) {
+        newState.selectedDate.setHours(_time.getHours());
+        newState.selectedDate.setMinutes(_time.getMinutes());
+        newState.selectedDate.setSeconds(_time.getSeconds());
+        newState.selectedDate.setMilliseconds(_time.getMilliseconds());
+      }
+
       const mode = state.view.mode;
       const _date = action.payload || state.view.date;
       const date = getViewDate(_date, state.minDate, state.maxDate);
@@ -97,6 +105,13 @@ export function bsDatepickerReducer(state: BsDatepickerState = initialDatepicker
       return Object.assign({}, state, newState);
     }
 
+    case BsDatepickerActions.SELECT_TIME: {
+      const {date, index} = action.payload;
+      const selectedTime = [...state.selectedTime || []] ;
+      selectedTime[index] = date;
+      return Object.assign({}, state, { selectedTime });
+    }
+
     case BsDatepickerActions.SET_OPTIONS: {
       if (!state.view) {
         return state;
@@ -115,11 +130,13 @@ export function bsDatepickerReducer(state: BsDatepickerState = initialDatepicker
         // if new value is array we work with date range
         if (isArray(newState.value)) {
           newState.selectedRange = newState.value;
+          newState.selectedTime = newState.value.map((i: Date) => i);
         }
 
         // if new value is a date -> datepicker
         if (newState.value instanceof Date) {
           newState.selectedDate = newState.value;
+          newState.selectedTime = [newState.value];
         }
 
         // provided value is not supported :)
@@ -140,6 +157,16 @@ export function bsDatepickerReducer(state: BsDatepickerState = initialDatepicker
         view: state.view
       };
 
+      newState.selectedRange.forEach((dte: Date, index: number) => {
+        const _time = (state.selectedTime || [])[index];
+        if (_time) {
+          dte.setHours(_time.getHours());
+          dte.setMinutes(_time.getMinutes());
+          dte.setSeconds(_time.getSeconds());
+          dte.setMilliseconds(_time.getMilliseconds());
+        }
+      });
+
       const mode = state.view.mode;
       const _date = action.payload && action.payload[0] || state.view.date;
       const date = getViewDate(_date, state.minDate, state.maxDate);

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

@@ -24,6 +24,8 @@ export class BsDatepickerState
   selectedDate?: Date;
   // daterange picker
   selectedRange?: Date[];
+  // time picker
+  selectedTime?: Date[];
 
   // initial date of calendar, today by default
   view?: BsDatepickerViewState;
@@ -88,6 +90,7 @@ export const initialDatepickerState: BsDatepickerState = Object.assign(
     locale: 'en',
     view: _initialView,
     selectedRange: [],
+    selectedTime: [],
     monthViewOptions: defaultMonthOptions
   }
 );

src/datepicker/testing/bs-datepicker.reducer.spec.ts

@@ -73,4 +73,15 @@ describe('BsDatepickerReducer.', () => {
     expect(reducer.view.mode).toEqual('day');
     expect((reducer.monthsModel.pop().month.toISOString() === state.flaggedMonths[1].month.toISOString())).toBeFalsy();
   });
+
+  it('selectedTime: the second selectedTime should be updated ', () => {
+    const state = initialDatepickerState;
+    const action: Action = {
+      type: BsDatepickerActions.SELECT_TIME,
+      payload: { date: new Date(1630298176000), index: 1 }
+    };
+    const reducer = bsDatepickerReducer(state, action);
+    expect(reducer.selectedTime.length).toEqual(2);
+    expect(reducer.selectedTime[1].getTime()).toEqual(1630298176000);
+  });
 });

src/datepicker/testing/bs-datepicker.spec.ts

@@ -268,4 +268,26 @@ describe('datepicker:', () => {
         expect(date).toBe(undefined);
       }).unsubscribe();
   });
+
+  it('should display one timepicker when withTimepicker is true', () => {
+    const datepickerDirective = getDatepickerDirective(fixture);
+    datepickerDirective.bsConfig = {
+      withTimepicker: true
+    };
+    showDatepicker(fixture);
+    const timepickerZone = document.querySelector('.bs-timepicker-in-datepicker-container');
+    const timepickers = document.querySelectorAll('timepicker');
+    expect(timepickerZone).toBeTruthy();
+    expect(timepickers.length).toEqual(1);
+  });
+
+  it('should not display timepicker when withTimepicker is true', () => {
+    const datepickerDirective = getDatepickerDirective(fixture);
+    datepickerDirective.bsConfig = {
+      withTimepicker: false
+    };
+    showDatepicker(fixture);
+    const timepickerZone = document.querySelector('.bs-timepicker-in-datepicker-container');
+    expect(timepickerZone).not.toBeTruthy();
+  });
 });

src/datepicker/testing/bs-daterangepicker.spec.ts

@@ -65,6 +65,27 @@ describe('daterangepicker:', () => {
         fixture.detectChanges();
     });
 
+  it('should display timepicker when withTimepicker is true', () => {
+    const directive = getDaterangepickerDirective(fixture);
+    directive.bsConfig = {
+      withTimepicker: true
+    };
+    showDatepicker(fixture);
+    const timepickerZone = document.querySelector('.bs-timepicker-in-datepicker-container');
+    const timepickers = document.querySelectorAll('timepicker');
+    expect(timepickerZone).toBeTruthy();
+    expect(timepickers.length).toEqual(2);
+  });
+
+  it('should hide timepicker when withTimepicker is false', () => {
+    const directive = getDaterangepickerDirective(fixture);
+    directive.bsConfig = {
+      withTimepicker: false
+    };
+    showDatepicker(fixture);
+    const timepickerZone = document.querySelector('.bs-timepicker-in-datepicker-container');
+    expect(timepickerZone).not.toBeTruthy();
+  });
 
     it('should display daterangepicker on show', () => {
         const datepicker = showDatepicker(fixture);

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

@@ -35,6 +35,7 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
 
   valueChange: EventEmitter<Date> = new EventEmitter<Date>();
   animationState = 'void';
+  isRangePicker = false;
 
   _subs: Subscription[] = [];
   constructor(
@@ -81,6 +82,7 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
     this.clearBtnLbl = this._config.clearButtonLabel;
     this.clearPos = this._config.clearPosition;
     this.customRangeBtnLbl = this._config.customRangeButtonLabel;
+    this.withTimepicker = this._config.withTimepicker;
     this._effects?.init(this._store)
       // intial state options
       .setOptions(this._config)
@@ -111,6 +113,10 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
     this._positionService.enable();
   }
 
+  timeSelectHandler(date: Date, index: number) {
+    this._store.dispatch(this._actions.selectTime(date, index));
+  }
+
   daySelectHandler(day: DayViewModel): void {
     if (!day) {
      return;