Open the date picker to the left or right of the input field

[mezbaulislamaunik]

The datepicker calendar always opens to the bottom of the input field.
In layouts where the input is close to the right edge (tables, grids, modals, etc.), the calendar overflows or gets clipped. It would be nice if it can be opened to the left or right so that it does not get clipped. I am attaching an image of the issue that I am facing.

This is my config:
Angular CLI : 21.1.2
Angular : 21.1.2
Node.js : 20.19.6
Package Manager : npm 10.8.2
Operating System : darwin arm64

[mezbaulislamaunik]

Is this request being looked at? I am stuck at this point.

[toozuuu]

Is this request being looked at? I am stuck at this point.

@mezbaulislamaunik Thanks for the feedback and the screenshot.

Right now the calendar only opens below or above the input (depending on space). It always lines up with the input’s left edge, so we don’t yet support opening to the left or right of the field. That’s why it gets clipped when the input is near the right edge of the viewport (or a table/modal).

We’re open to adding an option to control placement (e.g. prefer left/right when space is tight). If you’d like to track that, open a feature request issue and we can use it to plan the API (e.g. an input like panelPosition: 'left' | 'right' | 'auto') and implementation.

As a short-term workaround you can try:

• Putting the datepicker input in a column or container that has enough space below (or above) so the panel fits.
• Or using a full-screen / inline calendar mode if your UI supports it, so the panel isn’t tied to the input position.

We’ll keep this discussion in mind when we look at placement options.