Add chevron icon when open date-range picker

[ghost]

Hello Team,

I added the chevron icon when the date range picker open. It looks ok when the date range picker opens below the filter button but it does not look ok when the date range picker opens above the filter button. I added two images for your reference.

Your quick response is highly appreciated.

I want chevron icon at the bottom when date range picker will open above the filter button.

Thanks in advance.

[BerlyChristopher]

Hi Anoopyadav,

Greetings from Syncfusion.

Currently we are working on the reported query. We will validate and update the further details on tomorrow. We appreciate your patience until then.

Regards, Berly B.C

[BerlyChristopher]

Hi Anoopyadav,

Our DateRangePicker popup will be opened based on the available space from the input element placed. There is no public property to know that DateRangePicker popup opened direction (whether it is top or bottom) from the input element. So, we suggest you to place the chevron icon at the bottom of the DateRangePicker popup, if it is opened towards upward direction based on the below mentioned work around solution.

<div class="control-section">
    <div id="control_wrapper">
        <ejs-daterangepicker #daterange (open)="onOpen($event)"></ejs-daterangepicker>
    </div>
</div>

    onOpen(args){
      setTimeout(()=>{
        if(this.daterangeObj.element.offsetTop < args.popup.element.offsetHeight){
          console.log('Popup is opened from the downward direction');
        } else {
         console.log('Popup is opened from the upward direction');
        }
      })
    }

Please find the sample to check the popup is opened from top or bottom from the below link.

Sample Link: https://stackblitz.com/edit/angular-yropdr-grehrs?file=app.component.ts

If issue not resolved, please share your working sample (if possible) or code example that will help us to check and provide exact solution at our end.

Regards, Berly B.C

[ajithr]

We are closing this issue since there is no recent activity. Feel free to reopen the issue and update your comments for the reinvestigation.