Angular ui bootstrap current date (today) highlight without selecting

1
votes

I am using Angular.UI Bootstrap Datepicker (http://angular-ui.github.io/bootstrap/#/datepicker)

Now I am challenging one problem: the client always wants to see current date highlighted, even if it is not selected. Just like in this example (http://angular-ui.github.io/ui-date/).

Tried to google this problem, but no solution found for Angular.UI Bootstrap Datepicker.

There is no way, to switch to ui-date. Any ideas?

Thank you!

2
angularjsangular-uiangular-ui-bootstrap
you could create a custom directive with lower priority then datepickers priority (so it gets compiled after datepicker). then search todays date element and change it's style. - nilsK

2 Answers

2
votes

Replace in the datepicker control this

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

with

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

You can also use the custom-class attribute of the datepicker. Like this:

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

Then you add the function on the controller:

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

(another option is comparing day, month and year if you prefer)

Now just the css you want to evidence the day:

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

PS: This will show the day if you change the date from today, if you want to have the current day highlighted always just make a stronger css selector to override the default '.active' class.