Attach datepicker popup to any element, not only input

[ganeshjangam]

How to show datepicker pop up with using button only. Please see attached link.

Bug description:

When i adding directives directly on button with toggle function it gives error :

Template parse errors: There is no directive with "exportAs" set to "ngbDatepicker" ("ss="input-group-append"> <button class="btn btn-outline-secondary calendar" ngbDatepicker [ERROR ->]#d="ngbDatepicker" type="button">

Link to reproduce issue :

https://stackblitz.com/edit/angular-nduhng?file=app/datepicker-popup.html

For this link its Angular version 6 , ng-bootstrap version 3.2.0 but same issue reproduces for my application with

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4

ng-bootstrap: 1.0.0

Bootstrap: 4

[maxokorokov]

Currently datepicker has:

• an input[ngbDatepicker] selector that is way too restrictive
• provides NG_VALUE_ACCESSOR and NG_VALIDATORS implementation

Marking this as a feature request to simplify this and be able to attach the datepicker to any element.

[VictorJuliani]

Here is a simple workaround:

<button class="btn btn-outline-secondary" (click)="visible = !visible" type="button">Date picker</button>
<div class="input-group">
    <ngb-datepicker class="dropdown-menu show p-0"
        [class.d-none]="!visible"
        (select)="onDateSelection($event)">
    </ngb-datepicker>
</div>

Note: visible is just a boolean property of the component

[jaythakur]

Currently datepicker has:

• an input[ngbDatepicker] selector that is way too restrictive
• provides NG_VALUE_ACCESSOR and NG_VALIDATORS implementation

Marking this as a feature request to simplify this and be able to attach the datepicker to any element.

I have the same problem. I am using custom form control to show input type. is there any way to bind ngbdatepicker on the customs form control.

I am trying to achieve this: <app-input label="Hire Date" ngbDatepicker #d="ngbDatepicker"> error: There is no directive with "exportAs" set to "ngbDatepicker" (" <app-input label="Hire Date"

[popoleeMaster]

Same problem here, any news ? I made custom input in all my app, and want to use them for dates too..

[markusberg]

Another simple workaround is to hide the <input> field, and attach the popup to another element:

<div class="input-group">
  <input
    class="d-none"
    ngbDatepicker
    #d="ngbDatepicker"
    [(ngModel)]="internalModel"
    [positionTarget]="datediv"
    placement="bottom-left"
  />
  <div #datediv class="form-control clickable" (click)="d.toggle()">
    <i class="bi bi-calendar-event mr-1"></i><span>{{ getDisplayDate() }}</span>
  </div>
</div>