Bootstrap datepicker orientation/placement

Abs picture Abs · Nov 28, 2013 · Viewed 97.7k times · Source

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?

Answer

Abs picture Abs · Nov 28, 2013

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.