CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrap
smart987
smart987

Reputation: 832

changing the calender height and width of AngularJS UI Bootstrap datepicker

I am using Angularjs UI Bootstrap datepicker (http://plnkr.co/edit/kMXeOm5ct4pPFH0ZJc8u?p=preview), which is working fine. But I need to change the height and width of the calender. Is it possible?. The following is my code : 

  <div class="col-md-6">
    <p class="input-group">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
    </p>
</div>

Upvotes: 7

Views: 9588

Answers (3)

Garvit Anand
Garvit Anand

Reputation: 11

.dropdown-menu table { height: 120px; width: 120px; }

Upvotes: 1

Sandee
Sandee

Reputation: 15

You Can change popup height and width changing .btn padding 

.btn {
    padding: 1px 2px;
  }

But this will change your pop-up button size

Here is a fork of your plunk.

Upvotes: 0

Nadine
Nadine

Reputation: 559

You can do this with CSS:

.dropdown-menu table {
  height: 300px;
  width: 350px;
}

Here is a fork of your plunk.

Upvotes: 4

Related Questions