angularjs ui bootstrap datepicker popup without text input field

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

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.