Angular UI Bootstrap datepicker 半日期着色答案

【问题标题】：Angular UI Bootstrap datepicker half date coloringAngular UI Bootstrap datepicker 半日期着色
【发布时间】：2015-05-16 05:00:59
【问题描述】：

我有一个与jQuery datepicker show half day blocked上的这个问题类似的问题

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

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

【问题讨论】：

你能展示你在这方面的一些工作吗？对角线是什么意思？这会是什么样子（画一幅画）？这可能需要更多的充实才能回答。

标签： css twitter-bootstrap angular-ui-bootstrap

【解决方案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>

【讨论】：