feat(datepicker): Add optional "today" button (#5786)

* add optional configuration for datepicker 'today' button sampled heavily from quartepie #5024 * add datepicker today html and css * add tests for optional datepicker today button and function * remove unused code * feat(datepicker): Add optional "today" button config sampled heavily from quartepie #5024 * feat(datepicker): Add optional "today" button html/css * feat(datepicker): Add optional "today" button tests * feat(datepicker): Add optional "today" button tests * feat(datepicker): Add optional "today" button demo and docs * feat(datepicker): Add optional "today" button tests fixed failing test * feat(datepicker): Add optional "today" ng-api-docs update * feat(datepicker): Add optional "today" button: auto generated ng-api-docs.ts file * feat(datepicker): add optional positioning for Today button Co-authored-by: Peter Linnehan <pjl@pjl-macbook-pro.lan> Co-authored-by: Dmitriy Danilov <daniloff200@gmail.com>
valor-software · Jun 19, 2020 · 41e7a0b · 41e7a0b
1 parent 2c1b2bd
commit 41e7a0b
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 8 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -46,6 +46,7 @@ import { DemoDatePickerQuickSelectRangesComponent } from './demos/quick-select-r
 import { DemoDateRangePickerShowPreviousMonth } from './demos/daterangepicker-show-previous-month/show-previous-month';
 import { DemoDatePickerSelectWeekRangeComponent } from './demos/select-week-range/select-week-range';
 import { DemoDateRangePickerDisplayOneMonth } from './demos/daterangepicker-display-one-month/display-one-month';
+import { DemoDatepickerTodayButtonComponent } from './demos/today-button/today-button';
 
 
 export const demoComponentContent: ContentSection[] = [
@@ -406,6 +407,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Pick previous & current month instead of current & next month.When daterange selected and related to current month,
         daterangepicker will works by default, with current & next month</p>`,
         outlet: DemoDateRangePickerShowPreviousMonth
+      },
+      {
+        title: 'Show Today Button',
+        anchor: 'datepicker-show-today-button',
+        component: require('!!raw-loader!./demos/today-button/today-button.ts'),
+        html: require('!!raw-loader!./demos/today-button/today-button.html'),
+        description: `<p>Display an optional 'Today' button that will automatically select today's date.</p>`,
+        outlet: DemoDatepickerTodayButtonComponent
       }
     ]
   },

diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -37,6 +37,7 @@ import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/vis
 import { DemoDatePickerQuickSelectRangesComponent } from './quick-select-ranges/quick-select-ranges';
 import { DemoDateRangePickerShowPreviousMonth } from './daterangepicker-show-previous-month/show-previous-month';
 import { DemoDateRangePickerDisplayOneMonth } from './daterangepicker-display-one-month/display-one-month';
+import { DemoDatepickerTodayButtonComponent } from './today-button/today-button';
 
 
 export const DEMO_COMPONENTS = [
@@ -76,5 +77,6 @@ export const DEMO_COMPONENTS = [
   DemoDateRangePickerShowPreviousMonth,
   DemoDateRangePickerDisplayOneMonth,
   DemoDatePickerVisibilityEventsComponent,
-  DemoDatePickerQuickSelectRangesComponent
+  DemoDatePickerQuickSelectRangesComponent,
+  DemoDatepickerTodayButtonComponent
 ];
diff --git a/demo/src/app/components/+datepicker/demos/today-button/today-button.html b/demo/src/app/components/+datepicker/demos/today-button/today-button.html
@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           bsDatepicker
+           [bsConfig]="{ showTodayButton: true, todayPosition: 'center' }">
+  </div>
+</div>
diff --git a/demo/src/app/components/+datepicker/demos/today-button/today-button.ts b/demo/src/app/components/+datepicker/demos/today-button/today-button.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-today-button',
+  templateUrl: './today-button.html'
+})
+export class DemoDatepickerTodayButtonComponent {}
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -537,7 +537,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "_a",
-        "type": "DateArray",
+        "type": "number[]",
         "description": "<p>DateArray [year, month, date, .....]</p>\n"
       },
       {
@@ -613,7 +613,7 @@ export const ngdoc: any = {
       {
         "name": "_w",
         "type": "WeekParsing",
-        "description": "<p>week</p>\n"
+        "description": "<p>date specific info\nweek</p>\n"
       }
     ]
   },
@@ -1093,6 +1093,18 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Shows previous and current month, instead of current and next (dateRangePicker only)</p>\n"
       },
+      {
+        "name": "showTodayButton",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>Shows &#39;today&#39; button</p>\n"
+      },
+      {
+        "name": "todayPosition",
+        "defaultValue": "center",
+        "type": "string",
+        "description": "<p>Positioning for &#39;today&#39; button</p>\n"
+      },
       {
         "name": "showWeekNumbers",
         "defaultValue": "true",
@@ -2352,6 +2364,12 @@ export const ngdoc: any = {
           }
         ],
         "returnType": "BsModalRef"
+      },
+      {
+        "name": "checkScrollbar",
+        "description": "<p>Checks if the body is overflowing and sets scrollbar width</p>\n",
+        "args": [],
+        "returnType": "void"
       }
     ],
     "properties": []
@@ -2512,6 +2530,12 @@ export const ngdoc: any = {
         "description": "<p>Events tricks</p>\n",
         "args": [],
         "returnType": "void"
+      },
+      {
+        "name": "checkScrollbar",
+        "description": "<p>Scroll bar tricks</p>\n",
+        "args": [],
+        "returnType": "void"
       }
     ]
   },
@@ -4215,7 +4239,7 @@ export const ngdoc: any = {
       {
         "name": "activeDescendant",
         "type": "string",
-        "description": "<p>if false don&#39;t focus the input element the typeahead directive is associated with on selection</p>\n"
+        "description": "<p>if false restrict model values to the ones selected from the popup only will be provided\nif false the first match automatically will not be focused as you type\nformat the ng-model result after selection\nif true automatically select an item when there is one option that exactly matches the user input\nif true select the currently highlighted match on blur\nif false don&#39;t focus the input element the typeahead directive is associated with on selection</p>\n"
       }
     ],
     "methods": []

diff --git a/src/datepicker/base/bs-datepicker-container.ts b/src/datepicker/base/bs-datepicker-container.ts
@@ -20,6 +20,8 @@ import {
 export abstract class BsDatepickerAbstractComponent {
   containerClass: string;
   isOtherMonthsActive: boolean;
+  showTodayBtn: boolean;
+  todayPos: string;
 
   _effects: BsDatepickerEffects;
   customRanges: BsCustomDates[] = [];
@@ -77,6 +79,8 @@ export abstract class BsDatepickerAbstractComponent {
 
   setRangeOnCalendar(dates: BsCustomDates): void {}
 
+  setToday(): void {}
+
     /* tslint:disable-next-line: no-any */
   _stopPropagation(event: any): void {
     event.stopPropagation();

diff --git a/src/datepicker/bs-datepicker.config.ts b/src/datepicker/bs-datepicker.config.ts
@@ -118,4 +118,13 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
   monthLabel = 'MMMM';
   yearLabel = 'YYYY';
   weekNumbers = 'w';
+
+  /**
+   * Shows 'today' button
+   */
+  showTodayButton = false;
+  /**
+   * Positioning of 'today' button
+   */
+  todayPosition = 'center';
 }
diff --git a/src/datepicker/bs-datepicker.scss b/src/datepicker/bs-datepicker.scss
@@ -452,6 +452,23 @@
     .btn-default {
       margin-left: 10px;
     }
+
+    .btn-today-wrapper {
+      display: flex;
+      flex-flow: row wrap;
+    }
+
+    .today-right {
+      flex-grow: 0;
+    }
+
+    .today-left {
+      flex-grow: 1;
+    }
+
+    .today-center {
+      flex-grow: 0.5;
+    }
   }
 }
 

diff --git a/src/datepicker/bs-datepicker.spec.ts b/src/datepicker/bs-datepicker.spec.ts
@@ -7,7 +7,7 @@ import { BsDatepickerDirective } from './bs-datepicker.component';
 import { BsDatepickerConfig } from './bs-datepicker.config';
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
 import { CalendarCellViewModel, WeekViewModel } from './models';
-import { dispatchKeyboardEvent } from '@netbasal/spectator';
+import { dispatchKeyboardEvent, queryAll } from '@netbasal/spectator';
 import { registerEscClick } from '../utils';
 
 @Component({
@@ -18,7 +18,8 @@ class TestComponent {
   @ViewChild(BsDatepickerDirective, { static: false }) datepicker: BsDatepickerDirective;
   bsConfig: Partial<BsDatepickerConfig> = {
     displayMonths: 2,
-    selectWeek: true
+    selectWeek: true,
+    showTodayButton: true
   };
 }
 
@@ -128,4 +129,40 @@ describe('datepicker:', () => {
 
     expect(spy).toHaveBeenCalled();
   }));
+
+  it('should show the today button when showTodayButton config is true', () => {
+    showDatepicker(fixture);
+    const buttonText: string[] = [];
+    queryAll('button').forEach(button => {
+      buttonText.push(button.textContent);
+    });
+    expect(buttonText.filter(button => button === 'Today').length).toEqual(1);
+  });
+
+  it('should set today date', () => {
+    const datepicker = showDatepicker(fixture);
+    const datepickerContainerInstance = getDatepickerContainer(datepicker);
+
+    datepickerContainerInstance[`_store`]
+      .select(state => state.view)
+      .subscribe(view => {
+        view.date = new Date(2020, 0, 1);
+      }).unsubscribe();
+    fixture.detectChanges();
+
+    datepickerContainerInstance[`_store`]
+      .select(state => state.view)
+      .subscribe(view => {
+        expect(view.date.getDay()).not.toEqual((new Date().getDay()), 'should start out not equal to today');
+      }).unsubscribe();
+
+    datepickerContainerInstance.setToday();
+    fixture.detectChanges();
+
+    datepickerContainerInstance[`_store`]
+      .select(state => state.view)
+      .subscribe(view => {
+        expect(view.date.getDay()).toEqual((new Date().getDay()), 'should update to equal today');
+      }).unsubscribe();
+  });
 });
diff --git a/src/datepicker/themes/bs/bs-datepicker-container.component.ts b/src/datepicker/themes/bs/bs-datepicker-container.component.ts
@@ -75,6 +75,8 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
 
     this.isOtherMonthsActive = this._config.selectFromOtherMonth;
     this.containerClass = this._config.containerClass;
+    this.showTodayBtn = this._config.showTodayButton;
+    this.todayPos = this._config.todayPosition;
     this._effects
       .init(this._store)
       // intial state options
@@ -118,6 +120,10 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
     this._store.dispatch(this._actions.select(day.date));
   }
 
+  setToday(): void {
+    this._store.dispatch(this._actions.select(new Date()));
+  }
+
   ngOnDestroy(): void {
     for (const sub of this._subs) {
       sub.unsubscribe();

diff --git a/src/datepicker/themes/bs/bs-datepicker-view.html b/src/datepicker/themes/bs/bs-datepicker-view.html
@@ -52,12 +52,23 @@
       <button class="btn btn-success" type="button">Apply</button>
       <button class="btn btn-default" type="button">Cancel</button>
     </div>
+
+    <div class="bs-datepicker-buttons">
+      <div class="btn-today-wrapper"
+           [class.today-left]="todayPos === 'left'"
+           [class.today-right]="todayPos === 'right'"
+           [class.today-center]="todayPos === 'center'"
+           *ngIf="showTodayBtn">
+        <button class="btn btn-success" (click)="setToday()">Today</button>
+      </div>
+    </div>
+
   </div>
 
   <!--custom dates or date ranges picker-->
   <div class="bs-datepicker-custom-range" *ngIf="customRanges?.length > 0">
-    <bs-custom-date-view 
-      [selectedRange]="chosenRange" 
+    <bs-custom-date-view
+      [selectedRange]="chosenRange"
       [ranges]="customRanges"
       (onSelect)="setRangeOnCalendar($event)">
     </bs-custom-date-view>