angularjs - How to override angular ui bootstrap datepicker -

angularjs - How to override angular ui bootstrap datepicker -

i want add together new type class button in datepicker.

example:

button bluish colour range date jan 8, 2014 until jan 18, 2014

or, button reddish colour date feb 2, 2014.

i seek ovveride datepicker directive, doesn't work. here codes:

angular.module('app').directive('newdatepickerpopup',function(){ return{ restrict: 'ea', replace: true, require: ['datepicker'], templateurl: 'template/datepicker/datepicker.html', controller: function($scope){ console.log('controller newdatepickerpopup'); }, link: function(scope, element, attrs, requiredcontrollers){ console.log('requiredcontrollers',requiredcontrollers); console.log('link newdatepickerpopup'); element.on('click',function(){ console.log('on click nya disini'); }); } };

});

angular.module("template/datepicker/datepicker.html", []).run(["$templatecache", function($templatecache) { $templatecache.put("template/datepicker/datepicker.html", "<table class=\"zor-datepicker\" >\n" + " <thead>\n" + " <tr>\n" + " <th><button type=\"button\" class=\"btn btn-cal btn-sm pull-left\" ng-click=\"move(-1)\"><i class=\"fa fa-angle-left fa-lg\"></i></button></th>\n" + " <th colspan=\"{{rows[0].length - 2 + showweeknumbers}}\"><button type=\"button\" class=\"btn btn-cal btn-sm btn-block\" ng-click=\"togglemode()\">{{title}}</button></th>\n" + " <th><button type=\"button\" class=\"btn btn-cal btn-sm pull-right\" ng-click=\"move(1)\"><i class=\"fa fa-angle-right fa-lg\"></i></button></th>\n" + " </tr>\n" + " <tr ng-show=\"labels.length > 0\" class=\"h6\">\n" + " <th ng-show=\"false\" class=\"text-center ng-hide\">#</th>\n" + " <th ng-repeat=\"label in labels\" class=\"text-center\">{{label}}</th>\n" + " </tr>\n" + " </thead>\n" + " <tbody>\n" + " <tr ng-repeat=\"row in rows\">\n" + " <td ng-show=\"false\" class=\"text-center ng-hide\"><em>{{ getweeknumber(row) }}</em></td>\n" + " <td ng-repeat=\"dt in row\" class=\"text-center\">\n" + " <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\"><span ng-class=\"{'text-muted': dt.secondary}\">{{dt.label}}</span></button>\n" + " </td>\n" + " </tr>\n" + " </tbody>\n" + "</table>\n" + ""); }

]);

<input id="ph" ng-click="opencheckin($event)" name="in" type="text" class="form-control search home" new-datepicker-popup datepicker-popup="{{format}}" ng-model="check_in" ng-change="changecheckindate()" is-open="openedcheckin" min="mincheckindate" ng-required="false" show-weeks="false" show-button-bar="false" close-text="close" placeholder=""/>

anybody help me?

thank much

*sorry english language bad.

take on post: https://github.com/angular-ui/bootstrap/issues/743 utilize decorator in config phase override templateurl

angularjs twitter-bootstrap datepicker angular-ui-bootstrap