javascript – Angular-Bootstrap Datepicker – 当选择另一个日期时,保持今天的日期突出显示

注意：我在SO中检查过它,找不到任何有助于解决此问题的问题/回复.如果它已经存在,请指导我.

我正在使用Angular Bootstrap的ui-datepicker库.

我目前正在页面上嵌入日历.我正在使用angular.js,Bootstrap.css

>默认情况下突出显示今天的日期
>选择另一个日期将突出显示所选日期.但是,失去今天约会的亮点.
>禁用相应月份中的先前日期.

以下是示例代码：

<div ng-controller="DatepickerDemoCtrl">
  <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

  <div style="display:inline-block; min-height:290px;">
    <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date,mode)"></datepicker>
  </div>
</div>

这是Link to Plunkr

任何建议(关于我今天选择另一个日期的重点日期)将不胜感激.

解决方法

您可以使用自定义类(日期,模式)属性.你实际上已经在你的plunker中使用它了.在此属性中,您可以包含一个表达式,该表达式将根据传递的日期和模式返回自定义类.

在您的情况下,您在datepicker元素中正确定义此属性：

<datepicker ng-model="dt" min-date="minDate" 
    show-weeks="true" class="well well-sm" 
    custom-class="getDayClass(date,mode)"></datepicker>

您只需更改getDayClass函数并使其执行您想要执行的操作：无论在datepicker中选择了什么日期,都返回一个突出显示当前日期按钮的css类.

$scope.getDayClass = function(date,mode) {
    if (mode === 'day') {
      var daytocheck = new Date(date).setHours(0,0);
      var currentDay = new Date().setHours(0,0);

      if (daytocheck === currentDay) {
         return 'highlight-current-date'; 
      }
   }

   return '';
};

当然,将highlight-current-date类添加到css文件中.

.highlight-current-date button {
  background: aqua;
}

检查更新的plunker here.