我正在努力转换表单以利用 VueJS。该表单有一个使用 eonasdan/bootstrap-datetimepicker 的出生日期输入(http://eonasdan.github.io/bootstrap-datetimepicker/ http://eonasdan.github.io/bootstrap-datetimepicker/).
问题是当我改变的值dob
使用 DateTimePicker 输入,VueJS 不绑定到此。仅当用户直接键入输入时它才有效,这正是我试图避免的(正确格式化日期)。
输入本身没有什么特别的:
<div class="input-group date">
<input id="dob"
v-model="newCamper.dob"
placeholder="MM-DD-YYYY"
class="form-control"
name="dob" type="text">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
UPDATE
我也用 digitalbrush Masked Input Plugin 尝试过,结果相同。看起来 Vue 无法识别除了简单输入之外的任何内容。然而,这是可行的——尽管它有点笨拙:
$(document).ready(function () {
var dob = $("#dob");
dob.mask("99/99/9999",{placeholder:"MM/DD/YYYY"});
dob.change(function()
var value = $(this).val();
vm.$data.newCamper.dob = value;
})
});
更新:Vue.js 2.0 中的指令发生了相当大的变化 - 解决方案将涉及组件和 v-model。这个答案适用于 Vue.js
当使用 v-model 并且不涉及击键时,您的解决方案是典型的。在这种情况下,为了使其可重用,我通常会编写一个指令:
Vue.directive("date", {
"twoWay": true,
"bind": function () {
var self = this;
self.mask = "99/99/9999";
$(self.el).mask(self.mask, { placeholder:"MM/DD/YYYY" });
$(self.el).change(function() {
var value = $(this).val();
self.set(value);
});
},
"unbind": function () {
var self = this;
$(self.el).unmask(self.mask);
}
});
并像这样使用它:
<div class="input-group date">
<input id="dob"
v-date="newCamper.dob"
placeholder="MM-DD-YYYY"
class="form-control"
name="dob" type="text">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)