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

Posted 2023-05-07

【中文标题】在 Angular UI DatePicker 中突出显示特定日期

【英文标题】：Highlight Specific Dates in Angular UI DatePicker

【发布时间】：2014-04-08 05:15:53

【问题描述】：

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

【问题讨论】：

我想做同样的事情。你找到答案了吗？

这可能是解决方案的开始：***.com/questions/22865429/…

【参考方案1】：

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

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

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

【参考方案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>