Popup datepicker with custom date picking function closes automatically after value select

Bug description:

Popup datepicker with custom date picking function closes automatically after value select even with preventing event from propagation etc. I think there should be an option to prevent closing datepicker on date select (e.g. if I want to implement range datepicker in popup its problematic).

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/McF4tVd9D2fXNNx9QQxe?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.1.3

ng-bootstrap: 1.0.0-beta.2

Bootstrap: 4.0.0-beta

3 thoughts on “Popup datepicker with custom date picking function closes automatically after value select

  1. The least invasive solution would seem to be to add a flag to the API (ex: autoClose: default true) and wrap the current ref listener as such:

    // date selection event handling
    this._cRef.instance.registerOnChange((selectedDate) => {
      this.writeValue(selectedDate);
      this._onChange(selectedDate);
      if (this.autoClose) {
        this.close();
      }
    });

    This would keep backwards compatibility intact and allow users to control when the popup is closed when needed.

  2. Just wanted to add a very simple example of the implementing code:

    @ViewChild('datePicker') datePicker: NgbInputDatepicker;
    fromDate: NgbDate;
    toDate: NgbDate;
    onFirstSelection = true;
    
    selectDate(date: NgbDate) {
      if(this.onFirstSelection){
        this.fromDate = date;
        this.onFirstSelection = false;
      } else {
        this.toDate = date;
        this.onFirstSelection = true;
        this.datePicker.close();
      }
    }
    
    formatInputText(currentSelection: NgbDate, parserFormatter: NgbDateParserFormatter) {
      return `${this.fromDate ? parserFormatter.format(this.fromDate) : ''} - ${this.toDate ? parserFormatter.format(this.toDate) : ''}`;
    }
    <div class="date-picker-wrapper">
      <input class="form-control" placeholder="yyyy-mm-dd" name="dp" ngModel ngbDatepicker #datePicker="ngbDatepicker" (ngModelChange)="selectDate($event)" [dayTemplate]="t" [autoClose]="false" (formatLabel)="formatInputText($event.date, $event.parser)">
      <ng-template #t let-date="date" let-focused="focused">
        <span class="custom-day"
              [class.range]="isDateFrom(date) || isDateTo(date) || isDateInside(date) || isDateHovered(date)"
              [class.faded]="isDateHovered(date) || isDateInside(date)"
              (mouseenter)="hoveredDate = date"
              (mouseleave)="hoveredDate = null">
          {{ date.day }}
        </span>
      </ng-template>
    </div>
    <button class="input-group-addon" (click)="datePicker.toggle()" type="button">
      <span class="ln-icon-triangle-down"></span>
    </button>
  3. Could anybody please review the changes in #2192?

    <input ngbDatepicker #d="ngbDatepicker" [autoClose]="false"
        ngModel (ngModelChange)="onDateChange($event, d)">

    You can call d.close() whenever necessary.

    P.S. I’ll also introduce the (dateSelect) event to avoid using (ngModelChange) after this one is merged. It’s already present in the non-input datepicker.