在vue中选择日期后，如何清除bootstrap-vue中的datepicker字段？

Question

我正在使用 bootstrap-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>

如何清除字段？

Answer 1

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

Answer 2

你有两个选择。

要么绑定一个属性到's 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>

在vue中选择日期后，如何清除bootstrap-vue中的datepicker字段？

How make datepicker filed in bootstrap-vue clear after choosing a date in vue?

vue.js

bootstrap-vue