如何禁用 VueStrap 日期选择器答案

【问题标题】：How to disable VueStrap Datepicker如何禁用 VueStrap 日期选择器
【发布时间】：2018-06-08 12:59:48
【问题描述】：

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

【问题讨论】：

你能在这里分享任何现场演示/sn-p 吗？
这是一个演示：codepen.io/Taxali/pen/jKVQvb
如果没有禁用的功能，你可以这样破解：codepen.io/anon/pen/MXbZXV
@C2486：感谢您提出的窍门。我会试试这个，除非有人能够建议一种直接控制日期选择器组件的方法。

【解决方案1】：

无法禁用日期选择器check this component code in 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>

【讨论】：