[英]“Object(…) is not a function” and “this.$refs.root is undefined” when using vue-flatpickr-component
[英]vue-flatpickr-component has weird styling
我目前正在尝试重现此处显示的“包装”示例: https : //ankurk91.github.io/vue-flatpickr-component/,但即使在复制粘贴我需要的确切代码段时(没有按钮样式) ,我得到一个奇怪/缩短的选择器组件
<div class="form-group">
<label>Select date (wrap)</label>
<div class="input-group">
<flat-pickr v-model="form.date"
placeholder="Select date"
:config="configs.wrap"
:required="true"
@on-change="listenToOnChangeEvent"
class="form-control"
name="date-name"
:disabled="inputDisabled"
ref="datePickerWrap">
</flat-pickr>
<div class="input-group-append">
<button type="button" title="Toggle" data-toggle>
Toggle
</button>
<button type="button" title="Clear" data-clear>
Clear
</button>
</div>
</div>
</div>
第一个是带有附加按钮的datetimepicker(看起来很奇怪,没有内联),第二个没有附加任何特殊的东西
我的代码如下所示:
<div class="form-group">
<label>Select date (wrap)</label>
<div class="input-group">
<flat-pickr ref="datePickerWrap"
v-model="registeredAtFrom"
:config="configs"
:required="true"
:disabled="inputDisabled"
placeholder="Select date"
class="form-control search"
name="date-name">
</flat-pickr>
<div class="input-group-append">
<button class="btn btn-success" type="button" title="Toggle" data-toggle>
Toggle
</button>
<button class="btn btn-danger" type="button" title="Clear" data-clear>
Clear
</button>
</div>
</div>
</div>
<v-spacer></v-spacer>
<flat-pickr
v-model="registeredAtTo"
:config="configs"
:placeholder="$t('message.searchFields.registeredAtTo')"
class="form-control search"
name="date"
></flat-pickr>
vue-flatpickr-component配置:
configs: {
wrap: true,
enableTime: true,
dateFormat: 'Y-m-d H:i:S',
maxDate: new Date(),
minuteIncrement: 1,
locale: Hungarian,
time_24hr: true
}
相关的package.json元素:
"vue": "^2.5.2"
"vue-flatpickr-component": "^8.1.1"
"vuetify": "^1.2.3"
任何帮助,将不胜感激,谢谢!
您确定已加载.css吗? 导入软件包后,应立即将其单独导入:
<script>
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
...
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.