current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 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 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 at 17:33
    
See answer. :-) –  camden_kid Feb 12 at 17:41

2 Answers 2

up vote 0 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

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

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.