Angular UI DatePicker popup.html 模板覆盖分辨率更改

Question

我创建了一个新模板来覆盖 Angular UI Bootstrap 中的 popup.html。我正在努力想出解决方案来更改分辨率。

要更改分辨率：

ctrl 然后鼠标滚轮
ctrl 然后 + 和 -

笨蛋： http://plnkr.co/edit/tpl:Klbek5SpOGIA4FXTmlFX?p=preview

我尝试用 div 样式的亲戚包装我的模板，但这没有用。我将继续修补，但如有任何帮助，我们将不胜感激。

"<div style=\"position: relative\">" +

Answer 1

我不是 100% 确定你所说的分辨率是什么意思，但如果你想让它响应（针对不同的视口大小），你可能会考虑一种稍微不同的方法。请注意，由于日历本身是固定大小（并且将固定大小与响应混合使用具有挑战性），因此任何方法都需要付出更多的努力。

我会通过更改整个下拉结构来解决这个问题。从语义上讲，在这种情况下，无序列表对我来说没有意义。因此，为了简单明了，我使用了 div。另外，如果您想要响应式的东西，不要忘记添加视口元标记。

以下是我构建模板的方式：

<div class="dropdown-menu menu-extended" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)">
  <div class="clearfix">
    <div class="col-calendar">
      <div ng-transclude></div>
    </div>
    <div class="col-buttons">
      <h4>Something here...</h4>
      <button class='btn btn-default' ng-click='select(date.setTime(date.getTime()+30 * 86400000).toLocaleDateString())'>30 days</button>
    </div>
  </div>
  <div ng-if="showButtonBar" style="padding:10px 0">
    <span class="btn-group pull-left">
      <button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
      <button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
    </span>
    <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
  </div>
</div>

然后您可以使用媒体查询来优化下拉菜单和 "columns" 的显示方式：

.menu-extended {
  padding: 10px;
}

@media (min-width: 500px) {
  .menu-extended {
    width: 100%;
  }  
  .col-calendar, .col-buttons {
    padding: 15px;
    float: left;
  }
  .col-calendar {
    width: 65%;
  }
  .col-buttons {
    width: 35%;
  }
}

Angular UI DatePicker popup.html 模板覆盖分辨率更改

Angular UI DatePicker popup.html template override resolution changes

angular-ui-bootstrap

Updated Plunker