Align daterangepicker left

[Karel Roets]

Hi,

The daterangepicker dropdown is automatically aligned to the right side of the input like:

Is it possible to make the left side align with the left side of the input?

[UdhayaKumar Duraisamy]

Hi Karel,

We are validating the requirement. We will update the further details in two business days (28^th April 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Karel,

The Popup is placed based on the DateRangePicker component's input position  (Where the component is placed) and available space. For further clarification please refer to the attached sample. 

Sample Link : https://stackblitz.com/edit/angular-bwtx6n?file=index.html

Please share the details about the use case/scenario. It will help us to check and provide a prompt solution.

Regards,

Udhaya Kumar D

[Karel Roets]

Hi,

If the dateRangePicker is placed on te left side of the page, the dropdown (calendar part) will be on left: 0, causing it to stick to the left side of the page.

Is need a functionality that makes the dropdown align with the left side of the input as I have shown in the 2nd screenshot of my question.

Does this exist on the component or do I need to write it myself?

Kind regards.

[UdhayaKumar Duraisamy]

Hi Karel,

We can change the popup position in the open event of the DateRangePicker component as mentioned below. You can set the popup position X as ”left” in the open event and set the offsetX position with a number value as per your requirement to position the DateRangePicker popup.

Please refer to the below sample for reference.

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

Documentation (open event) : https://ej2.syncfusion.com/angular/documentation/api/daterangepicker#open

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Udhaya Kumar D

[Karel Roets]

Hi UdhayaKumar,

That is what i needed.

Thank you!

Regards

[UdhayaKumar Duraisamy]

Hi Karel,

We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.

Regards,

Udhaya Kumar D

[Karel Roets]

Hi,

I have noticed that when using preset values for the dateRangePicker, when you switch from a preset to 'Custom Range' (https://stackblitz.com/edit/angular-bwtx6n-vysab7?file=app.component.html) that the position will reset itself.

[UdhayaKumar Duraisamy]

Hi Karel,

We are validating the requirement. We will update the further details in two business days (5^th May 2022).

Regards,

Udhaya Kumar D

[Vinitha Jeyakumar]

Hi Karel,

Your reported issue can be resolved by overriding the showPopup prototype in the Calender component to set the ​position to left. Please check the code below,

Code snippet:

ngOnInit() {

    (DateRangePicker as any).prototype.showPopup = function () {

      this.popupObj.position = { X: 'left' };

      this.presetHeight(),

        1e3 === this.zIndex

          ? this.popupObj.show(null, this.element)

          : this.popupObj.show(null, null),

        this.isMobile && this.popupObj.refreshPosition();

    };

  }

Sample: https://stackblitz.com/edit/angular-bwtx6n-hojmwh?file=app.component.ts

Regards,

Vinitha