A simple datepicker in VueJS(VueJS 中的一个简单的日期选择器)
问题描述
I want to make a datetimepicker in a components input tag. I have implemented bootstrap-datetimpicker but when i choose date i cant get input value in the components methods( here is an example: https://jsfiddle.net/ma9sgnd8/1/
new Vue({
el: '#app',
data: {
date: ''
},
mounted: function() {
var args = {
format: 'MM/DD/YYYY'
};
this.$nextTick(function() {
$('.datepicker').datetimepicker(args)
});
this.$nextTick(function() {
$('.time-picker').datetimepicker({
format: 'LT'
})
});
}
})
Turns out vue listens to the input
event of the dom node rather than monitoring the value
of the js object (which is reasonable, because there won't be any js object until we document.querySelector()
or so). Proof: in the doc, it says we can use a .lazy
modifier to listen to change
events instead of input
. So when the jQuery-based bootstrap plugin changes the input's value
in js, vue won't detect it.
Luckily, the plugin provides a change event, so we can manually set the view-model's property when the change event fires: https://jsfiddle.net/ma9sgnd8/4/
这篇关于VueJS 中的一个简单的日期选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:VueJS 中的一个简单的日期选择器


基础教程推荐
- Bootstrap 模态出现在背景下 2022-01-01
- fetch 是否支持原生多文件上传? 2022-01-01
- 即使用户允许,Gmail 也会隐藏外部电子邮件图片 2022-01-01
- npm start 错误与 create-react-app 2022-01-01
- 检查 HTML5 拖放文件类型 2022-01-01
- 原生拖动事件后如何获取 mouseup 事件? 2022-01-01
- 在 contenteditable 中精确拖放 2022-01-01
- Bokeh Div文本对齐 2022-01-01
- Fabric JS绘制具有活动形状的多边形 2022-01-01
- 如何添加到目前为止的天数? 2022-01-01