Question

我无法找到配置angularjs ui-bootstrap datepicker弹出窗口的方法，以便它只显示按钮，而不是前面的文本输入字段。

有没有人有类似的要求？

Answer 1

这有效：

.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

这是一个有一些风格调整的版本 - 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

无需额外的CSS。只需输入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>

您甚至会丢失额外的<input-group>相关标签。

angularjs ui bootstrap datepicker popup没有文本输入字段

3 个答案: