current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I can't find a way to configure the angularjs ui-bootstrap datepicker popup so that it only shows the button, not the text input field in front of it.

Has anyone had a similar requirement?

share|improve this question
    
You could use CSS to hide it (opacity 0). – camden_kid Feb 12 '15 at 17:14
    
I tried opacity: 0 and visibility: hidden. The control is hidden but the button is then offset by the width of the text field. – aarffy Feb 12 '15 at 17:33
    
See answer. :-) – camden_kid Feb 12 '15 at 17:41
up vote 4 down vote

This works:

.date-popup {
  opacity: 0;
  width: 0;
}

<p class="input-group">
  <span class="input-group-btn">
    <input type="text" class="date-popup"
           datepicker-popup="{{format}}" ng-model="dt"
           is-open="opened" datepicker-options="dateOptions"
           date-disabled="disabled(date, mode)" ng-required="true"
           show-weeks="false" close-text="Close">
    <button type="button" class="btn btn-default" ng-click="open($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>
share|improve this answer
up vote 1 down vote

Here's a version with some style tweeks - Plunker.

    <p class="input-group" style="width:1px">
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" style="width:0; padding:0" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </p>
share|improve this answer
up vote 0 down vote

No need for additional css. Simply make the input type="hidden".

<input type="hidden" 
       class="form-control"
       uib-datepicker-popup="{{format}}"
       ng-model="dt"
       is-open="picker.opened"
       datepicker-options="dateOptions"
       close-text="Close" />

<button type="button" 
        class="btn btn-default" 
        ng-click="picker.opened = true">Open Calendar</button>

You even get to lose the additional <input-group> related tags.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.