CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
illya
illya

Reputation: 407

Bootstrap Datepicker positioning not working

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'm sure I'm missing something stupid...please help?

Upvotes: 2

Views: 7140

Answers (1)

Jeremiah Tam
Jeremiah Tam

Reputation: 41

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.

Upvotes: 0

Related Questions