时间戳

首页 > 解决方案 > Bootstrap 5 的输入组：如何使整个输入组可点击日期选择器项目？

vuejs2 - Bootstrap 5 的输入组：如何使整个输入组可点击日期选择器项目？

问题描述

我正在使用Vue-datetime包作为 UI 中的日期选择器，并且还使用 Bootstrap 5 的输入组表单组件将按钮放置在输入字段的两侧。

我想让整个输入字段以及按钮都可以点击。有人对如何做到这一点有任何建议吗？我目前的尝试只是使输入字段的一小部分可点击。如何将其扩展到整个字段以及按钮？

我当前尝试的屏幕截图： 在此处输入图像描述

我在这里有一个代码框： https ://codesandbox.io/s/gallant-glade-orwv9 ?file=/src/components/HelloWorld.vue

注意：隐藏内部日期字段边框也很好。

标签： vuejs2bootstrap-5

解决方案

您可以使用一些 Bootstrap 实用程序类来解决此问题。

应用form-control and p-0到包装器将使它看起来像一个正常的引导输入。

input-class然后我们可以使用prop向输入本身添加一些类。在这里，我们将添加w-100以将其拉伸到全宽。py-1 and px-2给占位符一些填充，然后border-0删除<input />.

class="form-control p-0" 
input-class="w-100 py-1 px-2 border-0"

您还需要将隐藏的输入字段移动到日期时间组件之后，以避免左侧的边框半径被弄乱。

我们可以将按钮做成 a<label>并指向输入以允许我们通过按下它来打开日期选择器。我们可以使用btn类来设置标签的样式。

new Vue({
  el: "#app"
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@5.1.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/vue-datetime@1.0.0-beta.14/dist/vue-datetime.min.css" />

<script src="//unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="//unpkg.com/luxon@1.28.0/build/global/luxon.min.js"></script>
<script src="//unpkg.com/weekstart@1.1.0/dist/commonjs/main.js"></script>
<script src="//unpkg.com/vue-datetime@1.0.0-beta.14/dist/vue-datetime.js"></script>

<div id="app" class="p-4">
  <label class="form-label" for="date_input">Date:</label>
  <div class="input-group">
    <datetime input-id="date_input" type="date" ref="dateInput" class="form-control p-0" input-class="w-100 py-1 px-2 border-0" placeholder="Choose a date..." aria-label="Choose a date..." aria-describedby="dateField" auto required></datetime>
    <input type="text" class="d-none" placeholder="Choose a date..." aria-label="Choose a date..." aria-describedby="dateField" />
    <label for="date_input" class="btn btn-primary">
      Button
    </label>
  </div>
</div>

推荐阅读