如何使 bootstrap-ui datepicker 和 timepicker 内联？

Posted 2023-05-07

【中文标题】如何使 bootstrap-ui datepicker 和 timepicker 内联？

【英文标题】：How to make bootstrap-ui datepicker and timepicker be inline?

【发布时间】：2018-11-07 22:48:50

【问题描述】：

有没有办法让 bootstrap-ui 组件显示为内联，像这样：

我尝试了各种方法，但无法让它们全部对齐。这是Plunkr

  <div class="col-md-6">
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="format" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
       <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
    </p>
  </div>

更新：

已尝试将 uib-timepicker 标记从 div 更改为 span，但这会破坏 datepicker 组件：https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

更新 2： 澄清一下，这个问题是关于这个库的：https://angular-ui.github.io/bootstrap/

更新3： 用相对单位更新了接受答案中提供的 plunkr：https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview

【问题讨论】：

至少给出你的完整代码！！

@nikhilsugandh 它在 Plunkr

我看不懂代码但是你用了 display:inline 块吗？？

取而代之的是完整的引导日期时间选择器！！！

@nikhilsugandh。我已经更新了问题以澄清我们在说什么

【参考方案1】：

将最后一个div 标记更改为span 标记。 添加两个新的 CSS 类： .buttonClass 垂直对齐：顶部； .timeClass table:first-child top:-35px;位置：相对； 将按钮类添加到保存按钮的span， 将时间类添加到包含时间选择器的span。

【讨论】：

谢谢，但它似乎破坏了 datepicker 组件：plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

这只是 CSS 样式的东西，我已经更新了答案。 plnkr.co/edit/Zb32Ica32DHUKH6dVVOe?p=preview

谢谢，但还是不行。我已经用你的建议更新了 Plunkr，结果是一样的。您能否修改 Plunkr 以使其给出正确的结果？

您尝试过我提供的 plunker，它应该可以工作吗？你可能忘记了第一步。

您做错的是应用带点的 timeClass，请删除您应用此类的跨度中的点：(