Posted in Uncategorized

DatePicker input: request for an @Output event when the calendar is closed

   February 25, 2021  1 Comment on DatePicker input: request for an @Output event when the calendar is closed

It would be nice if the datepicker input provided an @Output event to be emitted when the calendar popup is closed. I can provide a PR if you think you might merge that.

The reason is that I use the DatePicker input as readonly, and open the calendar popup on click. However, the input obviously blurs when that opens, and I would like my component that wraps the datepicker input to blur when the calendar popup is closed.

Is this something you are interested in?

Full dicussion on github.com

1 possible answer(s) on “DatePicker input: request for an @Output event when the calendar is closed”

  1. Yes, that’s clearly something that’s missing, just a couple of thoughts.
    I would add closing prevention, as it might provide a workaround for some of the custom [autoClose]-related issues.

    I think I’d suggest something like this for an API (just some ideas for discussion):

    export interface NgbDatepickerCloseEvent {
  preventDefault: () => void;
}

@Component(/**...**/)
export class NgbInputDatepicker() {

  @Output() close = new EventEmitter<NgbDatepickerCloseEvent>()
}

    Usage:

    <input ngbDatepicker (close)="onClose($event)" />
    onClose(event: NgbDatepickerCloseEvent) {
  // either just be notified or prevent closing
}

    For the implementation, there is already a private Subject for internal notification on close: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-input.ts#L65

    I guess the event emitter should trigger it unless the event was prevented.