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

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.