Angular Bootstrap DateTimePicker - Highlight Today Date on embedded Calender

Question

Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any.

I am using angular-bootstrap-datetimepicker library from the below url: Link to library

I am currently embedding the calender on the page. I am using angular.js, moment.js, grunt and bower. Absolutely no issue loading the calender and can even select a date and display the selected date as well.

Here is the sample code:

<div>
  Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
  <datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>

I am trying to highlight today's date automatically when the datetimepicker shows on the page. As you can see, in the config options, i could set the default view and min view.

Note: I tried to mimic the working code (till now) in Plunkr but, its not showing the calendar. I added all libraries as well. Anyways, that's just for idea only. If i could get the Plunkr working, i will update again. Here is the link to Plunkr.

Any suggestions (regarding highlight today date by default) will be appreciated.

Answer 1

To get the directive to show todays date by default, you can set the value of data.embeddedDate in the controller through its scope, like so:

$scope.data = { embeddedDate: new Date() };

Working Plunkr