22

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

enter image description here

So my question is how can i hide the footer of the date picker ??

Thanks in advance..

Ranadheer Reddy
  • 4,202
  • 12
  • 55
  • 77

5 Answers5

46

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" />
AlexG
  • 1,596
  • 2
  • 17
  • 26
6

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;
    });
Community
  • 1
  • 1
adri14
  • 151
  • 2
  • 3
2

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.

Mike Pugh
  • 6,787
  • 2
  • 27
  • 25
1

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.

e382df99a7950919789725ceeec126
  • 5,751
  • 4
  • 31
  • 56
  • Hi. Thanks for the solution. Using CSS we can hide it. But am searching is there any attribute like show-footer="false". but there is no such attribute mentioned in docs. :-(. so CSS is the only way to hide it. :-) – Ranadheer Reddy Sep 27 '13 at 07:17
0

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.

Safiyu
  • 11
  • 4