Angular UI Bootstrap datepicker half date coloring

I have a question that is similar to this question on jQuery datepicker show half day blocked

I need to style a date field diagonally.

For example, in booking calendars when people are leaving in the morning or coming at the afternoon.

Answer

May 15, 2015

Well the solution in the problem you linked to was to use a linear gradient like this:

.css-class-to-highlight a {
   background: linear-gradient(red 50%, green 50%);
}

I'm not sure what it buys you, but you can use a linear-gradient() and specify the angle in degrees like this:

div[datepicker] table td button {
   background: linear-gradient(-45deg, #4AD34A 50%, #009EFF 50%) !important;
}

You've asked for a CSS only solution that will only affect the visual presentation of the data. If that's what you want you're all set. If you wanted to take different actions based each quadrant, you'd need a more sophisticated setup.

Demo in Stack Snippets

var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
app.controller('ui.bootstrap.ctrl', function ($scope) {
   $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };
});

div[datepicker] table td button {
   background: linear-gradient(-45deg, #4AD34A 50%, #009EFF 50%) !important;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">

    <div class="row">
      <div class="col-xs-6">
        <p class="input-group">
          <input type="text" class="form-control" 
                 datepicker-popup
                 ng-model="dt" 
                 is-open="opened" 
                 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>
</div>