Angular-Bootstrap Datepicker - Keep Today's date highlighted when another date is selected

Problem

Note: I checked it in SO and could not find any Question/Response that help related to this issue. Please guide me if it already exists.

I am using Angular Bootstrap's ui-datepicker library.

I am currently embedding the calender on the page. I am using angular.js, Bootstrap.css

  • Highlight today's date by default
  • Select another date will highlight the selected date. But, losing the highlight for the today's date.
  • Disable the previous dates in the respective month.

Here is the sample code:

<div ng-controller="DatepickerDemoCtrl">
  <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

  <div style="display:inline-block; min-height:290px;">
    <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
  </div>
</div>

Here is the Link to Plunkr

Any suggestions (regarding highlight today date when i select another date) will be appreciated.

Problem courtesy of: Manoj

Solution

You can use custom-class(date, mode) attribute. You actually already use it in your plunker. In this attribute you can include an expression that will return a custom class based on passing date and mode.

In your case you correctly define this attribute in datepicker element:

<datepicker ng-model="dt" min-date="minDate" 
    show-weeks="true" class="well well-sm" 
    custom-class="getDayClass(date, mode)"></datepicker>

You just have to change getDayClass function and make it do what you want to do: return a css class that highlights current date's button no matter what date is selected in datepicker.

$scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);
      var currentDay = new Date().setHours(0,0,0,0);

      if (dayToCheck === currentDay) {
         return 'highlight-current-date'; 
      }
   }

   return '';
};

Of course, add highlight-current-date class to you css file.

.highlight-current-date button {
  background: aqua;
}

Check updated plunker here.

Solution courtesy of: gosling

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.