Bootstrap Datepicker Position

How can I change position of where the calendar pops up. I am using the below code and the calendar pops up to the far left. I need it to pop up over the input field.

Solution 1:

First, make sure that you use the Bootstrap CSS. It seems that the Bootstrap is not loaded properly.

You can set the HTML property data-date-orientation according to the documentation:

A space-separated string consisting of one or two of “left” or “right”, “top” or “bottom”, and “auto” (may be omitted); for example, “top left”, “bottom” (horizontal orientation will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for fixed placement of the picker popup.

Each option attribute has to have the data-date- prefix.

The distance to the input field may be controller by setting the margin.

Share