Bootstrap Datepicker positioning not working

Question

I'm using the Bootstrap Datepicker from Eternicode on my ASP.Net MVC website. The functionality works fine but I can't properly position the datepicker modal using the orientation option as described in the docs and in the code generator available at the link. The datepicker modal covers my input control when I click into the textbox.

HTML:

<input type="text" class="form-control datepicker input-sm" id="datepicker" />

Javascript:

$('#datepicker').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    daysOfWeekDisabled: '0,6',
    todayHighlight: true,
    orientation: 'auto'
});

I've tried changing the orientation to bottom-left , bottom-right and other options to no avail. The modal always covers the input control.

Notes:

• I haven't overwritten any CSS for the datepicker plugin
• Other options, eg, todayHighlight work

I'm sure I'm missing something stupid...please help?

Answer 1

Had similar problem. I used the resource js( http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js ) and css( http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css ) links available in the fiddle J Santosh recommended and it worked. Edit: When giving the orientation value, your code would be like this

$('#datepicker').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy',
    daysOfWeekDisabled: '0,6',
    todayHighlight: true,
    orientation: 'bottom left'
});

The '-' should not be there: bottom left instead of bottom-left. Use the css and js files above if it still doesn't work.