在 Angular UI DatePicker 中突出显示特定日期

Question

我正在使用 angular-ui datepicker 指令，需要用彩色文本渲染一些日期。我已经找到了使用 beforeShowDay 事件的引导日期选择器的示例，但找不到 angular-ui 日期选择器的任何示例。我对 angular 和 angular-ui 还很陌生，如果有任何建议，我将不胜感激。

Answer 1

如果你还在纠结这个问题，我现在也在关注这个问题，下面是我想到的可能解决方案的概要：

1. 使用 ng-change 事件的处理程序获取当前年份和月份
2. 格式化年份和月份，使其位于月初的凌晨 12 点
3. 使用数据库中的事件选择该月的日期（对于 MySQL，例如： SELECT DAYOFMONTH(eventDate) FROM eventTable WHERE eventDate >= date AND eventDate <= date + INTERVAL 1 MONTH
4. 将此数组传递给 javascript 函数并创建一个逆数组，这样当 x 属于从第 3 步返回的数字（日期）时，day[x] 为真，当 y 为数字时，day[y] 为假不在数组中。
5. 将第 4 步中的数组传递给 datepicker 指令（假设存储为 eventfulDays）
6. 使用 ng-class="{'highlight':eventfulDays[x]==true}" 突出显示它。

还没有尝试过，但可能很快就会实现！

Answer 2

 <input type="text" ng-model="startDate" datetime-picker="MM/dd/yyyy" datepicker-options="datepickerOptions" button-bar="false" enable-time="false" is-open="isopen" datepicker-append-to-body="true"  /> 

在控制器的日期选择器选项中添加 customClass

datepickerOptions: {
                        customClass: getDayClass,
                        showWeeks: false,
                        startingDay: 1,
                        minDate: new Date(date.getFullYear(),  
                        date.getMonth(), date.getDate())
                    }

调用 getDayClass() 并且在 for 循环中你可以编写逻辑来将类添加到多个日期，例如：

 function getDayClass(data) {
       var date = data.date,
       mode = data.mode;
       if (mode === 'day') {
           for (var j = 0; j < $scope.dates.length; j++) {
               var currentTime=moment().valueOf();   
               var startDate=moment(startDate).valueOf();                               
               if(currentTime<startDate){
                   return 'highlight-current-date' ;//class name
               }

           }
           return '';
       }
   }

在你的 html 中添加这个类

 <style>.highlight-current-date{
    background: LightSkyBlue;
     }
 </style>