angularjs ui bootstrap 没有文本输入字段的日期选择器弹出窗口

Question

我找不到配置 angularjs ui-bootstrap 日期选择器弹出窗口的方法，以便它只显示按钮，而不显示按钮前面的文本输入字段.

有没有人有类似的需求ui评论？

Answer 1

这是一个带有一些风格变化的版本 - 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 2

这个有效：

.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 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 没有文本输入字段的日期选择器弹出窗口

angularjs ui bootstrap datepicker popup without text input field

angularjs

angular-ui

bootstrap-datepicker