feat(datepicker): added customizable Button

added a button for customDates in DatePicker

Author: Berger

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

@@ -1044,6 +1044,24 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>CSS class which will be applied to datepicker container,\nusually used to set color theme</p>\n"
       },
+      {
+        "name": "customButtonLabel",
+        "defaultValue": "Custom",
+        "type": "string",
+        "description": "<p>Label for &#39;custom&#39; button</p>\n"
+      },
+      {
+        "name": "customDateButton",
+        "defaultValue": "undefined",
+        "type": "Date",
+        "description": "<p>Shows button to select this Date</p>\n"
+      },
+      {
+        "name": "customPosition",
+        "defaultValue": "right",
+        "type": "string",
+        "description": "<p>Positioning of &#39;custom&#39; button</p>\n"
+      },
       {
         "name": "customRangeButtonLabel",
         "defaultValue": "Custom Range",

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

@@ -26,6 +26,10 @@ export abstract class BsDatepickerAbstractComponent {
   showClearBtn?: boolean;
   clearBtnLbl?: string;
   clearPos?: string;
+  customDateBtn?: Date;
+  customBtnLabel?: string;
+  customBtnPos?: string;
+
 
   _effects?: BsDatepickerEffects;
   customRanges: BsCustomDates[] = [];
@@ -122,6 +126,9 @@ export abstract class BsDatepickerAbstractComponent {
   // eslint-disable-next-line
   clearDate(): void {}
 
+  // eslint-disable-next-line
+  setCustomDate(): void {}
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _stopPropagation(event: any): void {
     event.stopPropagation();

src/datepicker/bs-datepicker.config.ts

@@ -149,11 +149,19 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Shows clear button
    */
   showClearButton = false;
+  /**
+   * CustomDate clear button
+   */
+  customDateButton?: Date = undefined;
 
   /**
    * Positioning of 'today' button
    */
   todayPosition = 'center';
+  /**
+   * Positioning of 'today' button
+   */
+  customPosition = 'left';
 
   /**
    * Positioning of 'clear' button
@@ -169,6 +177,10 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    * Label for 'clear' button
    */
   clearButtonLabel = 'Clear';
+  /**
+   * Label for custom Button
+   */
+  customButtonLabel = 'Custom Date';
 
   /**
    * Label for 'custom range' button

src/datepicker/bs-datepicker.scss

@@ -472,17 +472,23 @@
     }
 
     .clear-right,
+    .custom-right,
     .today-right {
       flex-grow: 0;
+      order: 3
     }
     .clear-left,
+    .custom-left,
     .today-left {
       flex-grow: 1;
+      order: 1
     }
 
     .clear-center,
+    .custom-center,
     .today-center {
       flex-grow: 0.5;
+      order: 2
     }
   }
 }

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

@@ -178,6 +178,22 @@ describe('datepicker:', () => {
     expect(buttonText.filter(button => button === clearBtnCustomLbl).length).toEqual(1);
   });
 
+  it('should show custom label for custom button if set in config', () => {
+    const customBtnCustomLbl = 'Clear current';
+    const datepickerDirective = getDatepickerDirective(fixture);
+    datepickerDirective.bsConfig = {
+      customButtonLabel: customBtnCustomLbl,
+      customDateButton: new Date()
+    };
+    showDatepicker(fixture);
+
+    const buttonText: string[] = [];
+    // fixture.debugElement.queryAll(By.css('button'))
+    Array.from(document.body.getElementsByTagName('button'))
+      .forEach(button => buttonText.push(button.textContent));
+    expect(buttonText.filter(button => button === customBtnCustomLbl).length).toEqual(1);
+  });
+
   describe('should start with', () => {
 
     const parameters = [
@@ -257,6 +273,37 @@ describe('datepicker:', () => {
       }).unsubscribe();
   });
 
+  it('should set custom date', () => {
+    const datepicker = showDatepicker(fixture);
+    const datepickerContainerInstance = getDatepickerContainer(datepicker);
+    const customDate = new Date(2099, 11, 31)
+    datepickerContainerInstance.customDateBtn = customDate;
+
+    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.getDate())}-${(view.date.getMonth())}-${(view.date.getFullYear())}`)
+          .not.toEqual(`${(customDate.getDate())}-${(customDate.getMonth())}-${(customDate.getFullYear())}`);
+      }).unsubscribe();
+
+    datepickerContainerInstance.setCustomDate();
+    fixture.detectChanges();
+
+    datepickerContainerInstance[`_store`]
+      .select(state => state.view)
+      .subscribe(view => {
+        expect(`${(view.date.getDate())}-${(view.date.getMonth())}-${(view.date.getFullYear())}`)
+          .toEqual(`${(customDate.getDate())}-${(customDate.getMonth())}-${(customDate.getFullYear())}`);
+      }).unsubscribe();
+  });
+
   it('should clear date', () => {
     const datepicker = showDatepicker(fixture);
     const datepickerContainerInstance = getDatepickerContainer(datepicker);

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

@@ -80,6 +80,9 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
     this.showClearBtn = this._config.showClearButton;
     this.clearBtnLbl = this._config.clearButtonLabel;
     this.clearPos = this._config.clearPosition;
+    this.customDateBtn = this._config.customDateButton;
+    this.customBtnLabel = this._config.customButtonLabel;
+    this.customBtnPos = this._config.customPosition;
     this.customRangeBtnLbl = this._config.customRangeButtonLabel;
     this._effects?.init(this._store)
       // intial state options
@@ -164,6 +167,10 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
     this._store.dispatch(this._actions.select(undefined));
   }
 
+  setCustomDate(): void {
+    this._store.dispatch(this._actions.select(this.customDateBtn == null ? undefined : new Date(this.customDateBtn)));
+  }
+
   ngOnDestroy(): void {
     for (const sub of this._subs) {
       sub.unsubscribe();

src/datepicker/themes/bs/bs-datepicker-view.html

@@ -54,6 +54,14 @@
     </div>
 
     <div class="bs-datepicker-buttons" *ngIf="showTodayBtn || showClearBtn">
+      <div class="btn-custom-wrapper"
+            [class.custom-left]="customBtnPos === 'left'"
+            [class.custom-right]="customBtnPos === 'right'"
+            [class.custom-center]="customBtnPos === 'center'"
+            *ngIf="customDateBtn != null">
+        <button class="btn btn-success" (click)="setCustomDate()">{{customBtnLabel}}</button>
+      </div>
+
       <div class="btn-today-wrapper"
            [class.today-left]="todayPos === 'left'"
            [class.today-right]="todayPos === 'right'"
@@ -62,13 +70,13 @@
         <button class="btn btn-success" (click)="setToday()">{{todayBtnLbl}}</button>
       </div>
 
-        <div class="btn-clear-wrapper"
-        [class.clear-left]="clearPos === 'left'"
-        [class.clear-right]="clearPos === 'right'"
-        [class.clear-center]="clearPos === 'center'"
-        *ngIf="showClearBtn">
-          <button class="btn btn-success" (click)="clearDate()">{{clearBtnLbl}}</button>
-        </div>
+      <div class="btn-clear-wrapper"
+            [class.clear-left]="clearPos === 'left'"
+            [class.clear-right]="clearPos === 'right'"
+            [class.clear-center]="clearPos === 'center'"
+            *ngIf="showClearBtn">
+        <button class="btn btn-success" (click)="clearDate()">{{clearBtnLbl}}</button>
+      </div>
     </div>
 
   </div>