I'm using bootsrap-vue. It has a datepicker which after picking a date there is no way to make field clear.
<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>
How can I clear the field?
You have two options.
Either bind a property to 's v-model, and then use JavaScript to reset the value of said property.
The other option is to use the reset-button prop, which adds a reset button to the datepicker popup which clears the selected date when clicked by default.
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>You should use v-model to accept the selected date and then clear it using JavaScript, it will be removed from date selection