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

我正在使用angular-ui datepicker指令，并需要使用彩色文本呈现某些日期。我已经找到了使用beforeShowDay事件的bootstrap datepicker的例子，但是对于angular-ui datepicker却找不到任何东西。我相当新的角度和角度，并会很感激任何建议。突出显示角度UI中的特定日期DatePicker

来源

2014-03-05 user3385445

我想做同样的事情。你有没有找到答案？ – Ephraim

这可能是开始的解决方案：http://stackoverflow.com/questions/22865429/angular-ui-bootstrap-current-date-today-highlight-without-selecting – yar1

如果你还是到这一点，我到了这个问题，以及现在和这里是一个可能的解决方案我想到的轮廓：使用天然气的处理程序

获取当前年份和月份-change事件
格式的年份和月份，以便它是在上午12点在本月开始
从数据库事件（MySQL的类似选择该月的日子： SELECT DAYOFMONTH(eventDate) FROM eventTable WHERE eventDate >= date AND eventDate <= date + INTERVAL 1 MONTH
通行证这个数组给了一个javascri pt函数并创建一个逆数组，使得当x属于从步骤3返回的数字（日期）时，day [x]为true，并且当y是不在数组中的数字时，day [y]为false。
将数组从步骤4传递到datepicker指令（假设存储为eventfulDays）
使用ng-class =“{'highlight'：eventfulDays [x] == true}”来突出显示它。

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

来源

2015-01-31 10:05:47 zephinzer

<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（）和在循环中，您可以编写逻辑来添加类到多个日期，例如：

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>

来源

2017-09-18 11:51:28

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

回答

相关问题