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

note: checked in , not find question/response related issue. please guide me if exists.

i using angular bootstrap's ui-datepicker library.

i embedding calender on page. using angular.js, bootstrap.css

• highlight today's date default
• select date highlight selected date. but, losing highlight today's date.
• disable previous dates in respective month.

here 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 link plunkr

any suggestions (regarding highlight today date when select date) appreciated.

you can use custom-class(date, mode) attribute. use in plunker. in attribute can include expression return custom class based on passing date , mode.

in case correctly define 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 have change getdayclass function , make want do: return css class highlights current date's button no matter date 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 css file.

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

check updated plunker here.