Bootstrap datepicker orientation/placement

Question

I have a text field with an attached datepicker placed at the bottom of the page. My problem is that the datepicker appears below the text field.

Datepick

Consequently, it appears outside the window. I Googled and found that apparently I can fix this with some orientation property:

$('#dp2').datepicker({
     orientation: 'auto top'
});

but this had no effect. Anyone have an idea how can I achieve this?

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html — NoWar, Jul 09 '14 at 15:35
Check this post for the answer.. horizontal and vertical should be used as parameters of the widgetPositioning option https://stackoverflow.com/questions/32547737/bootstrap-3-datetimepicker-widget-position — user7436064, Jan 18 '17 at 13:54
If you want only top placement, remove the auto and use orientation: 'top' within the options object — chri3g91, Mar 19 '21 at 14:14

score 39 · Accepted Answer · answered Nov 28 '13 at 12:08

After some struggle found the required solution enter image description here

at Datepicker Link, just click the Download Development and get latest JS which include the orientation options. In the JS given defaults are:

var defaults = $.fn.datepicker.defaults = {
    autoclose: true,
    beforeShowDay: $.noop,
    calendarWeeks: false,
    clearBtn: false,
    daysOfWeekDisabled: [],
    endDate: Infinity,
    forceParse: true,
    format: 'mm/dd/yyyy',
    keyboardNavigation: true,
    language: 'en',
    minViewMode: 0,
    orientation: "auto",
    rtl: false,
    startDate: -Infinity,
    startView: 2,
    todayBtn: false,
    todayHighlight: false,
    weekStart: 0
};

I just use the default :

orientation: "auto",

there are more options available for orientation.

Bootstrap datepicker orientation/placement

1 Answers1

Linked