Note : You can find answer in this article : Remove footer from angular ui bootstrap date picker
I am using ui-bootstrap datapicket for date of birth field. as below
<input type="text" data-datepicker-popup="dd-MMMM-yyyy" data-show-weeks="false" data-ng-model="model.dateOfBirth" id="dateOfbirth" name="dateOfBirth">
It is working fine. as shown below
So my question is how can i hide the footer of the date picker ??
Thanks in advance..
You can do it globally, like the following:
myApp.config(function (datepickerConfig, datepickerPopupConfig) {
// datepickerConfig.showWeeks = false;
// datepickerPopupConfig.toggleWeeksText = null;
datepickerPopupConfig.showButtonBar = false;
});
Or you can do it for a specific instance of date-picker, like the folling:
<input type="text" ng-model="dt" show-button-bar="false" />
Looking for the same, I've found this answer:
Remove week column and button from Angular-ui bootstrap datepicker
So:
angular.module('app', ['ui.bootstrap'])
.config(function (datepickerConfig) {
datepickerPopupConfig.showButtonBar = false;
});
The template for the directive is included in the JS if you download the - "ui-bootstrap-tpls-[version].min.js" file.
It might be hard to modify the minified version so you may want to check out the unminified version.
But basically you're looking for the HTML code found @ https://github.com/angular-ui/bootstrap/blob/master/template/datepicker/popup.html
Once you find that bit in your JS file, modify it as you like.
Its quietly a bad solution for that, but i did not saw a possible soltion in the documentation. You can maybe hide them with CSS in this way:
[ng-controller="DatepickerDemoCtrl"] > hr ~ button { display:none }
When you also want to hide the <hr>:
[ng-controller="DatepickerDemoCtrl"] > hr { display:none }
Replace DatepickerDemoCtrl with your controller.
Your problem is very simple. You can modify the datepickerPopupWrap directive in the angular bootstrap module. You can find a templateUrl field. Something like this
templateUrl:template/datepicker/popup.html,
Just replace that field with template:
^<ul class=\^dropdown-menu\^ ng-style=\^{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}\^ class=\^dropdown-menu\^>\n^ +
^ <li ng-transclude></li>\n^ +
^</ul>^,
NOTE: Replace ^ with " . Since stackoverflow takes it as a blockquote i used ^.
template field defines how to display the output in the browser. You can even include your own elements and modify as you wish.
