CODEWITHSUNDEEP
jquerycsstwitter-bootstrapdatepicker
moses toh
moses toh

Reputation: 13162

How to resize the Bootstrap DatePicker?

My code is like this :

HTML : 

<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
    <input class="input-medium" size="16" type="text"><span class="add-on"><i class="icon-th"></i></span>
</div>

Javascript :

$(document).ready(function() {
    $('.datepicker').datepicker({
        autoclose: true,
        startDate: new Date()
    });
});

Demo : jsfiddle

I want to change the size of the bootstrap datepicker

Any suggestion to solve my problem

Thank you

Upvotes: 10

Views: 49226

Answers (3)

siderio2
siderio2

Reputation: 111

In my case, I just wanted to give the same height to the date input as the other inputs have. This line solved it:

$('input[type="date"]').height($('input').height());

Upvotes: 0

Robert
Robert

Reputation: 259

Here is the magic spell that worked well for me. And it does well in most browsers.

.datepicker,
.table-condensed {
    width: 220px;
    height: 220px;
    font-size: x-small; 
}

Basically, it displays a scaled down size of the bootstrap datepicker.

Upvotes: 3

T J
T J

Reputation: 43156

You can control the width using .datepicker and .table-condensed selectors:

$(document).ready(function() {
  $('.datepicker').datepicker({
    autoclose: true,
    startDate: new Date()
  });
});
.datepicker,
.table-condensed {
  width: 500px;
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
  <input class="input-medium" size="16" type="text"><span class="add-on"><i class="icon-th"></i></span>
</div>

You need to apply both because .table-condensed has max-width:100%. if you get rid of this you can control the size using .datepicker

Upvotes: 14

Related Questions