Angular ui-bootstrap-日期选择器在点击时改变颜色

Question

我正在使用 ui.bootstrap.datepicker。按下按钮时如何更改日期的颜色？ 'full' 和 'partially' 的样式在开始时应用，但是当我更改 'events' 时，我看不到任何变化。

$scope.events = [
        {
            date: new Date(),
            status: 'full'
        },
        {
            date: new Date(),
            status: 'partially'
        }
    ];

vm.open = function () {
        $scope.events[0].date = new Date(2018, 0, 1);
        return $scope.events[0].status;
    }

Answer 1

我所做的是向元素添加了一个 ng-change 并且每次模型更改时（当您单击日期选择器按钮时）我都会调用一个函数。

然后我过滤事件并删除具有匹配日期的事件

HTML

<div style="display:inline-block; min-height:290px;">
  <div uib-datepicker ng-model="dt" ng-change="clickOnDate(dt)" 
  class="well well-sm" datepicker-options="options"></div>
</div>

JS

$scope.clickOnDate = function(dt) {
    $scope.events = $scope.events.filter(function(d) {
        return (
          !(d.date.getFullYear() === dt.getFullYear() &&
            d.date.getMonth() === dt.getMonth() &&
            d.date.getDate() === dt.getDate())
        );
    })
}

我正在使用上面的 Array.prototype.filter 方法。

Demo plunker

Answer 2

不确定您的意图是什么，但是您可以轻松地将新项目推送到 $scope.events 数组 quite：

$scope.events.push({
  date: new Date(2018, 0, 1),
  status: 'my-event'
});

status 属性对应于您可以根据需要定义的 CSS class，以根据需要设置事件样式。例如，您可以像这样突出显示事件：

.my-event button span {
  background-color: red;
  border-radius: 32px;
  color: black;
}

这将在特定日期为您留下一个小红点，正如 angular-ui 文档中的示例所示。如果您想突出显示整个按钮，请试试这个：

.my-event button span {
  background-color: red;
  color: white;
}

要删除或更改事件的突出显示，有时您可能需要清除 $scope.events 数组（或删除单个项目）：

$scope.events = [];

Angular ui-bootstrap-日期选择器在点击时改变颜色

Angular ui-bootstrap-datepicker change color on click

angular-ui-bootstrap