如何禁用 VueStrap 日期选择器

Question

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

Answer 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 并切换 show/hide

 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>

如何禁用 VueStrap 日期选择器

How to disable VueStrap Datepicker

vue.js

vue-component

vue-strap