Question

注意：我在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

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

Answer 1

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

在您的情况下，您在custom-class(date, mode)元素中正确定义了此属性：

datepicker

您只需更改<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>功能并使其执行您想要执行的操作：无论在datepicker中选择的日期，都返回一个突出显示当前日期按钮的css类。

getDayClass

当然，将$scope.getDayClass = function(date, mode) { if (mode === 'day') { var dayToCheck = new Date(date).setHours(0,0,0,0); var currentDay = new Date().setHours(0,0,0,0); if (dayToCheck === currentDay) { return 'highlight-current-date'; } } return ''; };类添加到css文件中。

highlight-current-date

检查更新的plunker here。

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

1 个答案: