Automatic open above input control (where no space below)

[knocknarea]

Hello @kekeh. You have created a very nice component, thank you.

Would it be possible to automatically determine if the date picker popup should be placed above the input control if space is limited below, such as when the input control is near the bottom of the page.

I know there is the openSelectorTopOfInput option, however it does not appear to have any effect after initialization of the date picker component. At the moment I am doing this and it does not work

  public toggleCalendar() {
    const rect = this.element.nativeElement.getBoundingClientRect();
    if (window.innerHeight - rect.bottom < 300) {
      this.myDatePickerOptions.openSelectorTopOfInput = true;
    } else {
      this.myDatePickerOptions.openSelectorTopOfInput = false;
    }
    this.cd.detectChanges();
    this.picker.toggleCalendar();
  }

Ideally the component is best placed to determine that there is not enough space (given that it knows how much space the popup requires) to show the control below the input and display above accordingly?

This feature would be especially useful for any date picker inputs that are in a scrolling pane, such that the decision to open above or below would be determined at the point of displaying the popup based on available space and location of the input within the scrolling pane.

[kekeh]

Thanks @knocknarea

You have almost done.

You can set option selectorHeight in order to know how much space is needed. You can also change value of any option dynamically. You should do it this way in order to datepicker detect the change. Actually you need a new copy of options variable and that is one way to do it. Example is for the dateFormat and the dateRange options, but you can use similar method to the openSelectorTopOfInput option.

You can find all examples from here: https://github.com/kekeh/angular-mydatepicker/wiki