【问题标题】: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:感谢您提出的窍门。我会试试这个,除非有人能够建议一种直接控制日期选择器组件的方法。

标签: vue.js vue-component vue-strap


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-10
    • 1970-01-01
    • 2021-02-09
    • 1970-01-01
    • 1970-01-01
    • 2015-03-10
    相关资源
    最近更新 更多