vue.js - 如何禁用 VueStrap 日期选择器

Question

我正在使用 VueStrap 日期选择器。（https://yuche.github.io/vue-strap/#datepicker）有人可以建议如何禁用日期选择器吗？

Answer 1

没有禁用 datepicker 的工具在 github 中检查此组件代码

<input class="form-control datepicker-input" :class="{'with-reset-button': clearButton}" type="text" :placeholder="placeholder"
    :style="{width:width}"
    @click="inputClick"
    v-model="value"/>

因此，作为给定的替代方案，您可以添加另一个input as disabled并切换显示/隐藏

 var vm = new Vue({
        components: {
            datepicker:VueStrap.datepicker,
        },
        el: "#app",
        data: {
            emailDate:"2018-03-03",
            disable: true
        }
    })

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<script>
   
</script>


<div id="app">
 Pick Date
  <div v-show="disable">
    <input disabled :value="emailDate" type="text" placeholder="Select Date" class="form-control datepicker-input with-reset-button" style="width: 200px;">
  </div>
  <div v-show="!disable"><datepicker v-model="emailDate"
									id="datepickerActiondate"
									:format="'yyyy-MM-dd'"
									:clear-button="true"
									:placeholder="'Select Date'" 
									style=""
								>
							</datepicker></div>
<div><button @click="disable = !disable">Toggle Datepicker</button></div>
  
</div>