angularjs ui bootstrap datepicker popup without text input field

aarffy picture aarffy · Feb 12, 2015 · Viewed 8.5k times · Source

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

aarffy picture aarffy · Feb 12, 2015

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>