Question

我正在使用angular-ui datepicker指令，需要使用彩色文本呈现一些日期。我已经使用beforeShowDay事件找到了bootstrap datepicker的示例，但是找不到angular-ui datepicker的内容。我对angular和angular-ui相当新，并且会感激任何建议。

Answer 1

如果你仍然坚持这一点，我现在也解决了这个问题，这里是我想到的可能解决方案的概述：

使用ng-change事件处理程序获取当前年份和月份
格式化年份和月份，使其在月初的上午12点
使用数据库中的事件选择该月的日期（对于MySQL，例如： SELECT DAYOFMONTH(eventDate) FROM eventTable WHERE eventDate >= date AND eventDate <= date + INTERVAL 1 MONTH
将此数组传递给javascript函数并创建一个反向数组，以便当x属于从步骤3返回的数字（日期）时，day [x]为true，而当y为数字时，day [y]为false不在阵列中。
将数组从步骤4传递到datepicker指令（假设存储为eventfulDays）
使用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"  />

在控制器

中的datepicker-options中添加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>

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

2 个答案: