在 vue 中选择日期后，如何使 bootstrap-vue 中的 datepicker 字段清晰？答案

【问题标题】：How make datepicker filed in bootstrap-vue clear after choosing a date in vue?在 vue 中选择日期后，如何使 bootstrap-vue 中的 datepicker 字段清晰？
【发布时间】：2021-03-19 16:15:16
【问题描述】：

我正在使用 bootsrap-vue。它有一个日期选择器，在选择日期后无法清除字段。

<template>
  <div>
    <label for="datepicker-placeholder">Date picker with placeholder</label>
    <b-form-datepicker id="datepicker-placeholder" placeholder="Choose a date" locale="en"></b-form-datepicker>
  </div>
</template>

如何清除该字段？

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

你有两个选择。

要么将一个属性绑定到的 v-model，然后使用 JavaScript 重置该属性的值。

另一个选项是使用reset-button 属性，它会在日期选择器弹出窗口中添加一个重置按钮，默认情况下单击该按钮会清除所选日期。

new Vue({
  el: '#app',
  data() {
    return {
      date: ''
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-3">
  <b-input-group>
    <b-datepicker v-model="date" reset-button></b-datepicker>
    <template #prepend>
      <b-btn @click="date = ''">Clear</b-btn>
    </template>
  </b-input-group>
</div>

【讨论】：

【解决方案2】：

您应该使用 v-model 接受所选日期，然后使用 JavaScript 清除它，它将从日期选择中删除

【讨论】：

或者你可以添加一个按钮来重置 v-model。
无法输入。就可以选择日期
大多数情况下我需要手动清除日期。但是，如果我可以手动输入日期会很棒，因为我也可以清除它