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.

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?

Answer 1

After some struggle found the required solution

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.