Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you change the size of a size of an angular ui bootstrap date picker popup?

Here's what I'm referring to: http://angular-ui.github.io/bootstrap/

I don't see anything that indicates how to control the size. I tried changing the body font but that didn't work out

like image 274
Brian Miller Avatar asked Aug 17 '13 20:08

Brian Miller


People also ask

How do I change my DatePicker size?

By default DatePicker has standard height and width (height: '30px' and width: '143px'). You can change this height and width by using height and width property respectively.

What is $uibModalInstance in AngularJS?

The official documentation of AngularJS does not contain anything that describes how $uibModalInstance.close works, in the following code fragment, scope.close is a method used to close the modal window and pass an object to the caller controller var app = angular. module('myApp'); app.

What is UIB modal?

$uibModal is a service to create modal windows. It has an open method, that will return a modal instance. var modalInstance = $uibModal.

What is UI Bootstrap?

Bootstrap UI is a consistent library of design patterns for building beautiful and intuitive web apps on Bootstrap, the most popular CSS framework on the web.


1 Answers

This size of the datepicker can be changed by overriding the css for the bootstrap form-control and btn classes as shown in the following example:

.my-datepicker .form-control {
    height: 10px;
    padding: 11px;
}

.my-datepicker .btn {
    padding: 1px 2px;
}

then apply the my-datepicker class to the datepicker input-group

<span class="input-group my-datepicker">
    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="validToDate" is-open="opened1" 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>
</span>
like image 107
Douglas Hiles Avatar answered Oct 18 '22 03:10

Douglas Hiles