| <style> |
| .full button span { |
| background-color: limegreen; |
| border-radius: 32px; |
| color: black; |
| } |
| .partially button span { |
| background-color: orange; |
| border-radius: 32px; |
| color: black; |
| } |
| </style> |
| <div ng-controller="DatepickerDemoCtrl"> |
| <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> |
| |
| <h4>Inline</h4> |
| <div style="display:inline-block; min-height:290px;"> |
| <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker> |
| </div> |
| |
| <h4>Popup</h4> |
| <div class="row"> |
| <div class="col-md-6"> |
| <p class="input-group"> |
| <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" 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> |
| |
| <div class="col-md-6"> |
| <p class="input-group"> |
| <input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" 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> |
| </div> |
| <div class="row"> |
| <div class="col-md-6"> |
| <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select> |
| </div> |
| </div> |
| |
| <hr /> |
| <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button> |
| <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button> |
| <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button> |
| <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button> |
| </div> |