Angular ui引导当前日期（今天）突出显示而不选择答案

【问题标题】：Angular ui bootstrap current date (today) highlight without selectingAngular ui引导当前日期（今天）突出显示而不选择
【发布时间】：2014-04-04 14:21:47
【问题描述】：

我正在使用 Angular.UI 引导日期选择器 (http://angular-ui.github.io/bootstrap/#/datepicker)

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

试图用谷歌搜索这个问题，但没有找到 Angular.UI Bootstrap Datepicker 的解决方案。

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

谢谢！

【问题讨论】：

您可以创建一个优先级低于 datepicker 优先级的自定义指令（因此它在 datepicker 之后编译）。然后搜索今天的日期元素并更改其样式。

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

在日期选择器控件中替换这个

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);
}

【讨论】：

谢谢！有用！开源和好人万岁！ =)
嗨，这确实有效，但它似乎将相同的选定 CSS 样式应用于今天以及选定的日期。有什么方法可以显示不同的风格来区分今天和选定的日子？
@Holland Risley 您可以使 makeDate 函数返回一个带有另一个字段（例如 css 样式名称）的 json，然后在 datepicker 模板中制作 ng-class 表达式（ng-class="{' btn-info': dt.selected}") 使用 css 样式名称而不是使用 'btn-info' 如果“选择”
感谢您的提示，我不认为您可以告诉我如何格式化此 makeDate 函数调用，并将我指向 datepicker 模板？
@Holland Risley 您可以在“ui-bootstrap-tpls.js”中找到模板，只需搜索“{\'btn-info\': dt.selected}”。例如，您可以在 makeDate 函数返回的 json 中添加一个新的布尔值来判断它是否是“当前日期”，那么您将有 2 个布尔值“Selected”和“CurrentDay”，并且在 ng-class 中执行类似这样的操作ng-class="{'btn-info':dt.Selected, 'new-css':dt.CurrentDay}

【解决方案2】：

您还可以使用日期选择器的 custom-class 属性。像这样：

<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 选择器来覆盖默认的“.active”类.

【讨论】：