Bootstrap Datepicker Orientation/Placement

Bootstrap datepicker orientation/placement

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.

bootstrap datepicker orientation syntax for placement of the datepicker

Bootstrap datapicker plugin just support left orientation. You can check the original code here. However, it has some smartness to keep it in view.

All you can use is:

$("#dp3").datepicker({
    orientation: 'left'
});

orientation as right, top are not supported.

bootstrap date picker position

When using anything new in programming it's best to consult the documentation for the tool in question to discover what you can and can't do. In this case I did a google search for the bootstrap-datepicker and I found the docs here: Options Doc

after reading the docs you'll find there is a property called orientation you can set. Revising your options variable to the following should correct your issue:

var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
            orientation: 'bottom'
        };

Let me know how that goes!

Bootstrap DatePicker Position

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.

move the position of bootstrap datepicker

What you need is little bit of jquery

see here

JQuery

$('#datetimepicker1').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

About positioning of datepicker read here

Positioning Angular UI bootstrap Datepicker

If you want to implement a general solution, this is something that cannot be achieved just by altering the template of the datepicker-popup.

You have to change the updatePosition function inside the directive, so that
scope.position.left equals to something like this:

 scope.position.left += scope.position.width - $position.position(popupEl).width;

But again you have to be sure that you "read" the popuEl width after it is visible, otherwise you will get zero. Also, if you go to another mode (month or year selection) the position does not get updated although the popup width may change.

I just want to say that this feaure is not a one or two lines change, and probably it's better to open a request for this in https://github.com/angular-ui/bootstrap/issues?state=open Someone may be willing to investigate this further!

Bootstrap 3 datetimepicker widget position

$('.date').datetimepicker({
    language: 'es',
    format: 'dd/mm/yyyy',
    autoclose: 1,
    weekStart: 1,
    startView: 2,
    todayBtn: 1,
    todayHighlight: 1,
    forceParse: 0,
    minView: 2,
    pickerPosition: "top-left"
});

---

Related Topics