角引导日期选择器 - 保持今天的日期高亮选择其他日期时 [英] Angular-Bootstrap Datepicker - Keep Today's date highlighted when another date is selected

问题描述

的注意的：我检查的SO，但没有找到，帮助与此问题相关的任何问题/响应。如果它已经存在，请指引我。

Note: I checked it in SO and could not find any Question/Response that help related to this issue. Please guide me if it already exists.

我使用的角度引导的UI的日期选择器库。

I am using Angular Bootstrap's ui-datepicker library.

我目前嵌入在页面上的日历。我使用angular.js，Bootstrap.css

I am currently embedding the calender on the page. I am using angular.js, Bootstrap.css

• 今天高亮的日期默认为


• 选择另一日期将突出选定的日期。 但是，失去了今天的日期的亮点。


• 禁用各自的一个月previous日期。

下面是示例code：

<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>

下面是链接Plunkr

任何建议（关于亮点的今天日期时，我选择其他日期）将AP preciated。

Any suggestions (regarding highlight today date when i select another date) will be appreciated.

推荐答案

您可以使用自定义级（日期模式）属性。事实上，你已经在你的plunker使用它。在这个属性可以包含一个前pression将返回基于传递日期和模式的自定义类。

You can use custom-class(date, mode) attribute. You actually already use it in your plunker. In this attribute you can include an expression that will return a custom class based on passing date and mode.

在你的情况，你正确地定义在日期选择器这个属性元素：

In your case you correctly define this attribute in datepicker element:

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

您只需要改变 getDayClass 的功能，并使其做你想做的事：返回一个css类，无论凸显当前日期的按钮，在日期选择器中选择什么日期

You just have to change getDayClass function and make it do what you want to do: return a css class that highlights current date's button no matter what date is selected in datepicker.

$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 button {
  background: aqua;
}

检查更新plunker rel=\"nofollow\">。

Check updated plunker here.

这篇关于角引导日期选择器 - 保持今天的日期高亮选择其他日期时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！