Manoj Manoj - 2 months ago 27
AngularJS Question

Angular Bootstrap DateTimePicker - Highlight Today Date on embedded Calender

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:

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

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.


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:

$ = { embeddedDate: new Date() };

Working Plunkr