Customizing Angular-UI Bootstrap’ Directives

Lately, I was working with Angular-UI bootstrap and wanted to customize Datepicker (Bootstrap Angular-UI’ Datepicker) as this:

Angular UI Bootstrap’ Default Datepicker (Left) to Modified Datepicker (Right)

It was not very difficult but, also not the easiest thing to do. Now, if you‘re planning to customize Angularjs components, your friend have it all figured out for you :

1. Recently with release 0.14.0 AngularJS-UI prefixed all components.

Here are the changes that needs to be done for each component if you are upgrading to v0.14.0 Migration guide for prefixes

If not, your code is fine without prefixes, but you still need to understand that the documentation at there website is for post-release v0.14.0, so whatever component you use, ignore uib prefixes.

That means if you’re using v0.14.0 or later, use this custom directive :

<uib-datepicker ng-model="dt"></uib-datepicker>

else, this (I will be using this, over this post) :

<datepicker ng-model="dt"></datepicker>

2. Structural Changes / UI changes:

Angular UI (ui-bootstrap-tpls.js) uses cached templates to create components, all you have to do is, pass some parameter to custom directive be able to customize some features like min-date, max-date, format-day-header, etc.

But, if you want to do more, you need to edit templates of directives, StackOverflow | Can you override specific templates in Angular-UI Bootstrap?

So, as per rules of being lazy, I added these scripts to my index.html, it took care of restructuring of Previous and Next button on Day selection.

and also added some styles to change colors and cell-spacing.

(and also I am using materialdesignicons so I replaced defaults icons with same)

and It works yuhu!, There are other [better] ways of doing same, I could have fed it directly to $templateCache, but there’s even a better way to do it (Best practices rules), all I did was, moved these template’ markups to actual .html files and place them under a folder custom-templates, then used provider $provide.decorator to override directive’s templateUrl to point at it. (hence avoiding the need to directly mess around with $templateCache)

Custom template markup files

Then I wrote simple provider code to overwrite make custom templates be used for directives.

I just added following code to app.js file.

and it was working fine having most of the changes I wanted.

If you’re looking for no structural change but only changes in Styles, you should make use of `custom-class` (date, mode) (Default: null) : An optional expression to add classes based on passing date and current mode (day|month|year), to add classes and then modify Styles using those styles.

3. Format-day-header

Designs had day in week header with one letter (‘S’ for Sunday, ‘M’ for Monday and so on.)

So I added format-day-header=”E” as an attribute to my datepicker, and it still gave me the default headers i.e: sun, mon, tue, etc.

Then I tried format-day-header=”EEEE”, and it worked fine, gave ‘sunday’, ‘monday’, etc.

Clearly “E” was not an acceptable value, I thought it’s an obvious choice to have just initials of very obvious things (‘S’ for Sunday, ‘M’ for Monday, etc.). This should have an easy solution sitting there, I googled a bit and found nothing but more questions,
angular-ui-datepicker-format-day-header-format-with-with-2-letters

Then I dug deep and searched for “EEE” in ui-bootstrap-tpls.js and found it using regex: $locale.DATETIME_FORMATS.SHORTDAY.join(‘|’) for feeding the value for EEE attributes, if you do same, you will find that there is nothing for E and hence the easy and lazy way will be to search for SHORTDAY in angular.js and edit the value for SHORTDAY to required values i.e overriding.

"SHORTDAY": [
  "S",
  "M",
  "T",
  "W",
  "T",
  "F",
  "S"
],

But yes, the rule book of best practices says don’t edit vendor files, so created one more decorate provider :

You should add it to old config itself, if you’re planning to use both.

After this final step, and adding some styles, I also passed some already available parameters like format-day=”d”, show-weeks=”false”.

Finally, I got this beautiful looking datepicker, without using any additional plugin, just customizing the default directive given by Angular-UI Bootstrap, which happens to retain all keyboard control support users would need.

So a template was changed to something very different, using Best practices and least possible code, now you can go ahead and create your own custom template for Directives already there.

If you have any questions / suggestions, feel free to drop it in comments and If you found this article useful, click the heart below.