5

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.

adt
  • 4,320
  • 5
  • 35
  • 54
Manoj
  • 285
  • 4
  • 14
  • 1
    Here's your working plunkr. It needed wiring up in the script.js file: http://plnkr.co/edit/MNWlCsamgj3x991RncCa?p=preview – Matt May 09 '15 at 08:20

1 Answers1

2

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

Matt
  • 3,079
  • 4
  • 30
  • 36
  • One more thing is, i want to have the today's date highlighted with some other color (for say, lightgray) when i select any other date. Right now, since we set the embeddedDate to today's date, and if i select another date, the embeddedDate is being changed to the selected one. Can you help me? – Manoj May 09 '15 at 16:33
  • 1
    I've had a read through their docs, and it doesn't appear to be in the built-in functionality. You'd need to look at extending their source code. – Matt May 09 '15 at 16:49
  • If i can work out a quick and easy way of doing this i'll post a comment here for you. – Matt May 09 '15 at 16:54
  • Thanks Matt. Much appreciate your help and quick response. – Manoj May 09 '15 at 16:57
  • 1
    Ok, it didn't take as much time as i thought. Here's a link to a Plunkr with the changes made to the datetimepicker.js file. The code I've modified is on lines 133, 143, 144 and 145. In addition to that, you'll need to add a class of `.is-today` to your css file with whatever style you'd like for todays date: http://plnkr.co/edit/hK4N3mbeNFg878GF5vLr?p=preview – Matt May 09 '15 at 17:03
  • That's wonderful. It works. :) But, only thing is modifying the library might not be optimal. But, that's for later. :) Thanks Matt :) – Manoj May 09 '15 at 17:53