我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件,但在选择日期后尝试更新输入时卡住了,这是我的代码:
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);
},
}
});
如果通过键盘输入但在日历中选择时则不会更新值。我有什么想法可以通过日历在日期更改时更新值吗?
** 更新**
我已经得到了以下代码:
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 实例的值。我如何设置它以便仅针对选定的日期选择器进行更新?
最佳答案
这是最终的工作组件:
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);
},
}
});
关于jquery - Vue 2 日期选择器组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39990617/