Vue 2 Datepicker组件 [英] Vue 2 Datepicker Component
本文介绍了Vue 2 Datepicker组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用Bootstrap Datepicker创建Vue 2组件,但是在选择日期后尝试更新输入时遇到了麻烦,这是我的代码:
I am attempting to create a Vue 2 component using Bootstrap Datepicker but am getting stuck trying to update the input after a date is selected, here is my code:
Vue.component('datepicker', {
template: '\
<input class="form-control datepicker"\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
v-on:blur="updateValue($event.target.value)"\
v-on:focus="updateValue($event.target.value)"\
data-date-format="dd-mm-yyyy"\
data-date-end-date="0d"\
placeholder="dd-mm-yyyy"\
type="text" />\
',
props: {
value: {
type: String,
default: moment().format('DD-MM-YYYY')
}
},
mounted: function () {
},
methods: {
updateValue: function (value) {
this.$emit('input', value);
},
}
});
如果通过键盘输入,但在日历中选择该值时,该值将更新正常.有什么想法可以让我通过日历获取有关日期更改的值吗?
The value updates fine if inputted via a keyboard but not when selected in the calendar. Any ideas how I can get the value updated on date changes via the calendar?
**更新**
我得到了以下代码:
mounted: function() {
let self = this;
this.$nextTick(function() {
$('.datepicker').datepicker({
startView: 1,
todayHighlight: true,
todayBtn: "linked",
autoclose: true,
format: "dd-mm-yyyy"
})
.on('changeDate', function(e) {
var date = e.format('dd-mm-yyyy');
self.updateValue(date);
});
});
}
但是它现在更新页面上所有Datepicker实例的值.如何设置它,使其仅针对所选的Datepicker更新?
But it now updates the value of all the instances of Datepicker on the page. How can I set it up so it only updates for the selected Datepicker?
推荐答案
这是最终的工作组件:
Vue.component('datepicker', {
template: '\
<input class="form-control datepicker"\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
data-date-format="dd-mm-yyyy"\
data-date-end-date="0d"\
placeholder="dd-mm-yyyy"\
type="text" />\
',
props: {
value: {
type: String,
default: moment().format('DD-MM-YYYY')
}
},
mounted: function() {
let self = this;
this.$nextTick(function() {
$(this.$el).datepicker({
startView: 1,
todayHighlight: true,
todayBtn: "linked",
autoclose: true,
format: "dd-mm-yyyy"
})
.on('changeDate', function(e) {
var date = e.format('dd-mm-yyyy');
self.updateValue(date);
});
});
},
methods: {
updateValue: function (value) {
this.$emit('input', value);
},
}
});
这篇关于Vue 2 Datepicker组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文