Close ng-bootstrap date picker when click outside in angular2

bootstrap-datetimepicker close on click outside
prevent datepicker close when clicking outside
ng-bootstrap datepicker
ngbdatepicker close on outside click
ngbdatepicker autoclose not working
ng-bootstrap table
ng-bootstrap datepicker range popup
angular datepicker

I am using bootstrap4 datepicker https://ng-bootstrap.github.io/#/components/datepicker

I want to close datepicker when click outside of calendar. Right now when user select date then it will close.

My HTML file code is below:

<input ngbDatepicker #d="ngbDatepicker" (click)="d.toggle();" [formControl]="eventForm.controls['event_date']" value="12/03/2017" type="text" [readonly]="true" autocomplete="off">  

I try to adding (click)="d.close();" in body tag. But it's also close when i try to change month and year from calendar. What change i have to do either in HTML or component to close this datepicker when user click outside of calendar?

Yea, I had the same problem... This works well for me:

component HTML:

<input placeholder="{{ task.deadline.year }}-{{ task.deadline.month }}-{{ task.deadline.day }}" name="date" id="date" [(ngModel)]="task.deadline" ngbDatepicker  #d="ngbDatepicker" (click)="!completed && d.toggle(); $event.stopPropagation();" (document:click)="closeFix($event, d)" readonly>

and the TS (the only thing that you need is the closeFix() function):

closeFix(event, datePicker) {
  if(event.target.offsetParent == null)
    datePicker.close();
  else if(event.target.offsetParent.nodeName != "NGB-DATEPICKER")
    datePicker.close();
}

Close datepicker on click outside · Issue #1623 · ng-bootstrap/ng , I have to try hide datepicker on outside click but doesn't work on my end. Bug description: Datepicker popup does not close when an area outside of the popup/textbox is clicked/touched. Perhaps an optional true/false setting could be introduced to allow for this functiona

You can use the on-mouseleave event to close the datepicker when the user leave the div

<input on-mouseleave="d.close()" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle();" [formControl]="eventForm.controls['event_date']" value="12/03/2017" type="text" [readonly]="true" autocomplete="off">  

Have a nice day!

Datepicker Popup, @armcgrat Since the last release of ng-bootstrap, you can also you plain-old-​javascript objects, if you like. See https://ng-bootstrap.github.io/#/  @smartHasmukh In this plunker demo if you open both the datepicker by clicking on calendar icon one by one without clicking anywhere else and then if you click outside only one calendar will be closed leaving other calendar open and you have to close it by clicking calendar icon of that calendar.

In your component.ts,

    import { ViewChild } from '@angular/core';

    @Component({
      host: {
        '(document:click)': 'closeDatepicker($event)',
      }
    })

    export class MyComponent {
      @ViewChild('d') eventDate;

      closeDatepicker(e) {
        if (!this.eventDate.isOpen() || (e.target.id === 'd' && e.target.id === 'dropdown-icon')
          || (e.target.offsetParent && e.target.offsetParent.localName.includes('ngb-datepicker'))
          || !(e.target.parentElement && e.target.parentElement.parentElement &&
            !e.target.parentElement.parentElement.localName.includes('ngb-datepicker'))) {
          return;
        }
        if (this.eventDate.isOpen() && e.target.id !== 'd' && e.target.id !== 'dropdown-icon') {
          this.eventDate.close();
        }
      }
    }

Datepicker, Selector ngb-datepicker. Exported as ngbDatepicker. Inputs "outside" - the popup will close only on the outside click and not on date selection/inside clicks. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Angular2 + Ng-bootstrap datepicker, with close on select, Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip,  Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript. As simple as Angular & Bootstrap CSS. If you know Angular, you also know ng-bootstrap. All code is tested with almost 100% coverage, all changes are meticulously reviewed.

Angular Datepicker – Exploring Bootstrap (Part 3) – Longing to know, Angular2 Starter Plunker - Typescript - RC.0 A simple plunker demonstrating Angular2 usage: - Uses SystemJS + TypeScript to compile on the fly - Includes  * Indicates whether the datepicker popup should be closed automatically after date selection / outside click or not. * * @since 1.1.0 * By default the popup will close on both date selection and outside click. If the value is 'false' the popup has to * be closed manually via '.close()' or '.toggle()' methods.

Developers - Close popover on click outside -, The Angular Bootstrap Datepicker is relatively easy to get up and if the datepicker popup should be forced closed by specific click events. Detecting clicks on a component is easy in Angular 2: Just use the (click) event binding, pass a function from the component’s instance and you are done. However, if you need to detect clicks outside of your component, things are getting tricky. You will usually need this for custom implementations of drop-down lists, context menus, … Continue reading Angular 2: A Simple Click Outside

Comments