bootstrap-datetimepicker with vue.js not working properly
Question
I am trying to use bootstrap-datepicker with Vue.js Trying to create a simple datepicker component. The problem is, when I write into input, component's data is updated. But when I use datepicker gui, it doesn't work. Data is not updated. Why? What is missing exactly?
Here is my code:
Vue.component('picker', { 'props': { 'date': { 'twoWay': true } }, 'template': '\ <div class="form-group">\ <div class="input-group date datepicker">\ <input type="text" class="form-control" v-bind:value="this.date">\ <span class="input-group-addon">\ <span class="glyphicon glyphicon-calendar"></span>\ </span>\ </div>\ </div>', 'watch': { 'date': function(value) { console.log('Updated!'); } }, 'mounted': function() { $(this.$el.firstChild).datetimepicker(); } }); app = new Vue({ 'el': '#app', 'data': {} });
<!DOCTYPE html> <html> <head> <title></title> <!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Transition ve Collapse --> <script src="collapse.js"></script> <script src="transition.js"></script> <!-- Moment JS --> <script src="moment-with-locales.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Datetime picker --> <script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div class="container"> <div id="app" class="row"> <div class='col-sm-6'> <picker></picker> </div> </div> </div> <script type="text/javascript"> </script> </body> <script src="app.js"></script> </html>
6 answers
solution1
5 ACCPTED 2017-01-23 14:45:58
I couldn't find a better way than losing focus (blur).
Here's my code:
Vue.component('picker', {
'props': ['date'],
'template': '\
<div class="form-group">\
<div class="input-group date datepicker">\
<input type="text" class="form-control" :value="this.date" v-on:focus="datepick_dialog_open" v-on:blur="select_by_lose_focus">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
</div>',
'mounted': function() {
$(this.$el.firstChild).datetimepicker();
},
'methods': {
'datepick_dialog_open': function() {
this.$el.firstChild.children[1].click();
},
'select_by_lose_focus': function() {
console.log('AHOY!');
this.date = this.$el.firstChild.firstChild.value;
}
}
});
app = new Vue({
'el': '#app',
'data': {}
});
The point is, you really can't use it if your element does not lose focus. It updates the data when input loses its focus. IDK any better way.
v-on:focus is irrelevant. It just opens the datetime picker UI when input gains focus.
The main job is done by select_by_lose_focus .
solution2
2 2018-01-06 21:29:43
Another example using $emit and v-model on the component. This page describes why value and $emit are needed to support v-model. I needed a form element name and optional required class for validation.
https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
<picker name="start_date_1_1" required="1" v-model="res.start_date"></picker>
Vue.component('picker', {
props: ['name', 'value', 'required'],
template: '\
<div class="form-group">\
<div class="input-group date">\
<input :name="name" type="text" class="form-control" v-bind:class="{required: required}" v-bind:value="value">\
<span class="input-group-addon">\
<span class="glyphicon glyphicon-calendar"></span>\
</span>\
</div>\
</div>',
mounted: function() {
var self = this;
var picker = $(this.$el.firstChild).datepicker({autoclose: true});
picker.on('changeDate', function(e) {
self.$emit('input', e.date.toLocaleDateString("en-US", {day: '2-digit', month: '2-digit', year: 'numeric'}));
});
}
});
solution3
1 2020-08-27 19:09:18
Add before vue object init:
Vue.directive('vueinput', {
twoWay: true,
bind: function (el, binding, vnode) {
$(el).on("change", (e) => {
el.dispatchEvent(new Event('input', { target: e.target }));
});
},
});
And then add v-vueinput="[uniqueString]" directive to your datetime input:
<div data-start-view="4" data-min-view="2" class="input-group date datetimepicker">
<input type="text"
v-model="payment.pay_date"
v-vueinput="payment.pay_date">
<div class="input-group-append">
<button class="btn btn-primary"><i class="icon-th mdi mdi-calendar"></i></button>
</div>
</div>
I recommend to put same value as v-model to this directive ('payment.pay_date' in my example)
You can use unlimited entities of inputs with this directives on one page.
solution4
0 2017-07-14 04:41:11
Thanks for the answer @nejdetckenobi, if picking date only, the blur approach works. However, if picking both date & time, I found that the blur approach didn't work so well.
Instead I followed the Vue.js wrapper component example. It makes use of on('change', function(){}) and $emit .
The code below that worked for me (in my setup) with date formatting, a key part is in mounted section of your vue component declaration.
Vue.component('datetime', {
props: ['value'],
template: '<input class="form-control" id="override-datetime-field"></input>',
mounted: function () {
var vm = this
$(this.$el)
.datetimepicker()
.val(this.value === '' ? '' : moment(this.value).format('DD-MMM-YYYY, h:mm a'))
.trigger('change')
.on('change', function () {
vm.$emit('input', this.value)
})
},
watch: {
value: function (value) {
$(this.$el).val(value).trigger('change');
}
}
}
The key part is here:
$(an-element).datetimepicker().trigger('change')
.on('change', function () {
vm.$emit('input', this.value)
})
Original source example: https://v2.vuejs.org/v2/examples/select2.html
solution5
0 2018-03-22 15:04:39
Got it to work by dispatching the input Event upon changing the date.
$('.with-calendar').datetimepicker({ weekStart: 1, language: 'de', bootcssVer: 3, format: "yyyy-mm-dd hh:ii:00", viewformat: "yyyy-mm-dd hh:ii:00", autoclose: true }).on('changeDate', function (event) { // Communicate datetimepicker result to vue let inputFields = event.target.getElementsByTagName('input'); // depends on your html structure for (let i = 0; i < inputFields.length; i++) { inputFields[i].dispatchEvent(new Event('input', {'bubbles': true})); } });
<template> ... <div class="form-group"> <label class="col-sm-3 control-label">Date and Time</label> <div class="col-sm-6"> <div class="input-group date with-calendar"> <input type="text" class="form-control" v-model="start_datetime"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> ... </template>
solution6
0 2018-08-31 07:33:14
got this problem and got it to work by initializing the date-picker after initializing the vue. eg:
var vm = new Vue({
el: '#myForm',
data: {
field1: "",
field2: ""
}
});
$(".date-picker").datepicker({
todayHighlight: true,
autoclose: true,
closeOnDateSelect: true
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.