Question

我正在使用Angular.UI Bootstrap Datepicker（http://angular-ui.github.io/bootstrap/#/datepicker）

现在我正在挑战一个问题：客户总是希望突出显示当前日期，即使它未被选中。就像在这个例子中一样（http://angular-ui.github.io/ui-date/）。

尝试谷歌这个问题，但找不到Angular.UI Bootstrap Datepicker的解决方案。

切换到ui-date是没有办法的。有什么想法吗？

谢谢！

Answer 1

在datepicker控件中替换此

var days = getDates(firstDate, numDates), labels = new Array(7);
for (var i = 0; i < numDates; i++) {
  var dt = new Date(days[i]);
  days[i] = makeDate(dt, format.day, (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear()), dt.getMonth() !== month);
}

与

var today = new Date();
var days = getDates(firstDate, numDates), labels = new Array(7);
for (var i = 0; i < numDates; i++) {
  var dt = new Date(days[i]);
  var highlight = (selected && selected.getDate() === dt.getDate() && selected.getMonth() === dt.getMonth() && selected.getFullYear() === dt.getFullYear());
    if(!highlight) {
        highlight = (today.getDate() === dt.getDate() && today.getMonth() === dt.getMonth() && today.getFullYear() === dt.getFullYear());
    }
  days[i] = makeDate(dt, format.day, highlight, dt.getMonth() !== month);
}

Answer 2

您还可以使用datepicker的自定义类属性。像这样：

<datepicker custom-class="isToday(date, mode)" show-weeks='false' class="well well-sm" ng-model="selectedDate" ng-change="onDateSelect()"></datepicker>

然后在控制器上添加该功能：

$scope.isToday = function(date, mode) {
    var today = new Date();
    today.setHours(12,0,0,0);
    if(today.toDateString() == date.toDateString() ){
        return 'today';
    }
};

（如果您愿意，另一种选择是比较日，月和年）

现在只是你要证明当天的css：

.today button{
      background-color: #BCBCBC;}

PS ：如果您要更改今天的日期，这将显示当天，如果您希望突出显示当前日期，则只需使用更强大的css选择器来覆盖默认值＆＃39;。活性＆＃39;类。

Angular ui bootstrap当前日期（今天）突出显示而不选择

2 个答案: