angularjsangular-ui-bootstrapangular-ui

How to use a template in Angular UI Bootstrap Datepicker?


In this question it is explained how to use templates in Angular UI Boostrap. But it doesn't have an example of a DatePicker template. I need to change the fonts and get rid of the number borders. I analyzed the Angular UI javascript but couldn't find the template. Any thoughts?

This is the PLUNK.

HTML

    <p class="input-group" style="width:200px;">
      <input type="text" class="form-control" is-open="true" ng-model="dt"
           uib-datepicker-popup="MM-dd-yyyy" 
           datepicker-options="dateOptions" close-text="Close"
           popup-placement="bottom-left" on-open-focus="false"/>
      <span class="input-group-btn">
          <button type="button" class="btn btn-default">
              <i class="glyphicon glyphicon-calendar"></i>
          </button>
      </span>
   </p>

Solution

  • datepicker.html1

    <div class="uib-datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
      <uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker>
      <uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
      <uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
    </div>
    

    The daypicker templates are in https://github.com/angular-ui/bootstrap/tree/master/template/datepicker


    tried to change the background color of the days

    added an inline style

    in day.html I added style="background-color:orange" to the td that contains the days. Look at the plunk.

    To change the day buttons background to orange add the following CSS:

    example.css

    .uib-day .btn-default { 
        background-color: orange;
    }
     .uib-day .btn-default:hover { 
        background-color: white;
    }
    

    This overrides the btn-default background for the uib-day buttons.

    The DEMO on PLNKR.