Bootstrap datepicker orientation/placement

问题:

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?

回答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.

回答2:

Hi you can go this link and select the style for the datepicker Online demo with code

回答3:

Check this post for the answer..

horizontal and vertical should be used as parameters of the widgetPositioning option

Bootstrap 3 datetimepicker widget position