hide only clear button in angular js datepicker directive

Question

I want to hide only clear button from datepicker directive in angular js. Currently there are three buttons at the bottom of the angular js datePicker directive(Today, clear and Close), Is there any way to make visibility of these buttons configurable, such that i can hide one of the buttons out of it.

The Date picker which i am using is using ui-bootstrap library.

Can you give us some screen shots perhaps? Also, what have you tried? — David says Reinstate Monica, CommentedMar 30, 2015 at 18:51
if you could provide a demo of your case in, say plnkr.co sandbox that could make it easier for audience to help you — shershen, CommentedMar 30, 2015 at 18:51
I agree with the answers for doing this via css. There is no other quick workaround or ready available options to remove this button. So either the quick and easy way (css) or the more complex way by modifying the template file which is not always possible for enterprise apps or ones that use bower. — geostima, CommentedApr 15, 2016 at 14:21

Rob J · Accepted Answer · 2015-03-31 13:30:50Z

Currently there is now way to hide individual buttons in the datepicker button bar via options on the directive. You can override the template and remove the clear button, but that is a global patch and doesn't offer hiding/showing based on a condition. You could create a class that targets the button you want to hide as this plunk

 .datepicker-noclear [ng-click="select(null)"] { display: none; }

demonstrates although that is a fragile workaround.

I would suggest submitting a feature request to add the option of which buttons are available in the button bar.

rigobcastro · Accepted Answer · 2015-09-09 00:32:14Z

Easy, replace the template:

<script type="text/ng-template" id="template/datepicker/popup.html"> <ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()"> <li ng-transclude></li> <li ng-if="showButtonBar" style="padding:10px 9px 2px"> <span class="btn-group pull-left"> <button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button> </span> <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button> </li> </ul> </script>

keepscoding · Accepted Answer · 2015-12-27 16:15:07Z

You hack with css. It worked for me.

.ui-datepicker .btn-group .btn-danger.btn{ display: none; }

Rex · Accepted Answer · 2015-07-18 12:47:48Z

Further to Rob J's solution, if we add a ng-class={"require": "vm.required"} to the parent div of the datepicker input, or simply add a class called require to the div. Then use the magic css to hide or show the clear button depending on the value of vm.required:

.require button[ng-click^="select(null)"] { display: none; }

vladichimescu · Accepted Answer · 2016-04-06 10:31:45Z

if you want to remove the clear button, it means that the field is required, and as I do not agree with forcing things (like creating a div parent and typing classes), then just set the element for which you active the datepicker as required

[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] { display: none; }

<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />

I don't understand what you mean by the field being required when the clear button is simply removed? I have used datepickers on many applications and I have removed the clear button on some, all the buttons on others, etc, and never - once - did it have anything to do with it being a required field... Apologies if I seem rude, but I don't think that your post answers the question and is unrelated completely. — geostima, CommentedApr 15, 2016 at 14:18

Kumail Hussain · Accepted Answer · 2018-07-13 07:41:45Z

You can do this css trick to hide the clear button :

.uib-button-bar > .btn-group > .btn-danger { display: none !important; }

Saad Joudi · Accepted Answer · 2019-09-24 15:46:49Z

You can hide it by adding to style.css this :

.uib-clear { display: none; }

Collectives™ on Stack Overflow

hide only clear button in angular js datepicker directive

7 Answers 7

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Related