How to open and hide ng-bootstrap datepicker on custom actions?

Question

Currently I am using:

• ng-bootstrap 1.0.0-alpha.24
• angular/core 4.0.0
• bootstrap 4.0.0-alpha.6

I wanted to ask if someone knows how to autoclose the datepicker when the focus is lost or another datepicker is opened.

Also i wanted to now if it is possible to close the datepicker in the component code with typescript.

It would be nice if someone could provide a working plunker or a code snippet.

My actual implementation:

<div class="input-group">
    <input class="rect-border full-width"
           placeholder="YYMMDD"
           [(ngModel)]="selectedDate"
           ngbDatepicker
           #datePickerInput="ngbDatepicker"
           (keydown.arrowup)="incrementDate()"
           (keydown.arrowdown)="decrementDate()"
           (ngModelChange)="validate('modelChanged')"
           (blur)="validate(null)"
           [disabled]="disabled"
           [ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">

    <div class="input-group-addon rect-border"
         (click)="disabled ? true : datePickerInput.toggle()"
         [ngClass]="{'picker-button-disabled': disabled}">
        <img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
    </div>
</div>

Plunker: ng-bootstrap team demo

I have searched a long time and I am also pretty new to angular and these things.

Thank you for your help!

Update:

Possible solution:

There were a lot of good solutions provided. I also found out by myself that I could use the class NgbInputDatepicker to close the datePicker (I always used NgbDatepicker, so it didn't work).

@ViewChild('datePickerInput') datePicker: NgbInputDatepicker;

this.datePicker.close();

Solution 1

you can open and close your datepicker from your html itself

for eg:

<div class="input-group">
    <input class="rect-border full-width"
           placeholder="YYMMDD"
           [(ngModel)]="selectedDate"
           ngbDatepicker
           #datePickerInput="ngbDatepicker"
           (keydown.arrowup)="incrementDate()"
           (keydown.arrowdown)="decrementDate()"
           (ngModelChange)="validate('modelChanged')"
           (blur)="validate(null)"
           [disabled]="disabled"
           [ngClass]="{'input-required': required, 'normal-color': valid, 'picker-disabled': disabled}">

    <div class="input-group-addon rect-border"
         (click)="disabled ? true : datePickerInput.toggle()"
         [ngClass]="{'picker-button-disabled': disabled}">
        <img src="assets/img/calendar-icon.svg" class="datpickerToggle"/>
    </div>
</div>

<div (click)="datePickerInput.open()"></div>

<span (click)="datePickerInput.close()"></span>

and also there are many functions which you can use in your html. some are close(), isOpen(), manualDateChange(), open(), toggle(), validate() etc. You can refer it in this plunkr http://plnkr.co/edit/G1b6fFrtVZwEz4lsou8n?p=preview

Solution 2

In typescript you can simply define a variable datepickerVisibility and then in your template use *ngIf to show or hide your datepicker component. Here is a demo code:

Template: <datepicker *ngIf="datepickerVisibility" [ngModel]="date"> </datepicker>

Component: private datepickerVisibility: boolean = false; // Show the datepicker showDatepicker() { this.datepickerVisibility = true; }

Edit:

Therefore you could use jQuery. Add the jQuery js into your index.html and in your typescript component use jQuery as follows:

declare let jQuery: any;

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'template.html',
    styleUrls: ['test.css'],
})
export class TestComponent {
   constructor() {}

    public toggleDatepicker() {
        jQuery("#datepicker01").toggle();
   }
 }

And in your template file just add the id datepicker01 to your datepicker div

<div id="datepicker01" ...>

Solution 3

I was looking for a solution to this issue, but in a scenario where the datepicker is wrapped in a custom component and has to expose a function a parent component can call to toggle the datepicker. The answers provided are great and will work for most use case, but not mine, as I didn't want to add a jQuery dependency and calling toggle from the HTML isn't an option.

Here's how I solved it.

I added a ViewChild reference to the datepicker input in the *.component.ts file

  @ViewChild('d', {static: true}) d;

that matches the datepicker identifier in the HTML file

<input (dateSelect)="dateSelected($event)" class="form-control" (focus)='d.toggle()' placeholder="yyyy-mm-dd" name="d"
  [ngModelOptions]="{standalone: true}" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">

and called the toggle function within a method exposed by the component

toggle() {
  this.d.toggle();
}

That way, another component can call the toggle() function exposed by this component to toggle the datepicker like so:

In HTML

<app-custom-datepicker #date></app-custom-date-picker>

In .ts file

@ViewChild('date', {static: true}) date;
.
.
.
this.date.toggle();

Comments

[WorstCoderEver]

the problem with this solution is that i use the <div> (with the toggle inside) to open the datepicker. I have only access to the datepicker via the #datePickerInput attribute

[WorstCoderEver]

i like this solution but i don't know how to set the id of the datepicker because i am using it with <input> and not the selector <datepicker>

[Tom Mühlegger]

Simply set <input id="datepicker01" ...> :)

[WorstCoderEver]

i managed to add jquery to my project and get it working but when i add the toggle function to the <input> then the input field disappears. So jquery does not know there is a datepicker

[WorstCoderEver]

thats cool and works! do you know if I can watch a variable in the component and toggle the datepicker in the html ? like i got required : boolean and then in html required ? picker.open() : picker.close();