How to remove footer from Angular ui bootstrap datepicker

In this article i am going to show how to remove footer from Angular ui bootstrap date picker.

Assume you have following angular ui bootstrap date picker

<input type="text" data-datepicker-popup data-ng-model="dateOfBirth" />
above code renders date picker as shown below 


If you observe above angular ui date picker image you can see that it is also showing a footer which contains options to choose Today, Weeks and Clear.

We can remove this footer from angular ui bootstrap date picker using following code

if you want to remove footer globally you can use following AngularJS code

yourApp.config(function (datepickerConfig, datepickerPopupConfig) {
    // datepickerConfig.showWeeks = false;
    // datepickerPopupConfig.toggleWeeksText = null;
    datepickerPopupConfig.showButtonBar = false;
});
 Or if you want to remove footer for only one specific date picker you can do using following code

<input type="text" data-datepicker-popup show-button-bar="false" />

In this way you can remove footer from angular ui bootstrap datepicker



To remove week column from Angularjs ui bootstrap date picker check this post http://www.coding-issues.com/2015/10/remove-week-column-and-button-from-angular-ui-bootstrap-datepicker.html

For more posts on AngularJS visit AngularJS

No comments:

Post a Comment