Angular UI Bootstrap datepicker半日期着色

Question

我有一个与 jQuery datepicker show half day blocked

上的问题类似的问题

我需要对角设置日期字段的样式。

例如，在人们早上离开或下午来的预订日历中。

Answer 1

你所链接的问题的解决方案是使用这样的线性渐变：

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

我不确定它会给你带来什么，但你可以使用 linear-gradient() 并像这样以度数指定角度：

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

您要求的解决方案 CSS 只会影响数据的视觉呈现。如果那是你想要的，你就准备好了。如果您想根据每个象限采取不同的操作，则需要更复杂的设置。

堆栈片段中的演示

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>

Angular UI Bootstrap datepicker半日期着色

Angular UI Bootstrap datepicker half date coloring

css

twitter-bootstrap

angular-ui-bootstrap

堆栈片段中的演示