多平台统一管理软件接口,如何实现多平台统一管理软件接口
279
2023-05-13
vue2.0 与 bootstrap datetimepicker的结合使用实例
1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向绑定不起作用了,bootstrap datetimepicker修改的日期不会同步到data中,下面看我的解决方案:
选择发送时间:
http:// id="messageSendTime">
</template>
import $ from 'jquery'
export default {
name: 'time',
data () {
return {
time: ''
}
},
methods: {
dateDefind () {
var d, s;
var self = this;
d = new Date();
s = d.getFullYear() + "-"; //取年份
s = s + (d.getMonth() + 1) + "-";//取月份
s += d.getDate() + " "; //取日期
s += d.getHours() + ":"; //取小时
s += d.getMinutes() + ":"; //取分
s += d.getSeconds(); //取秒
self.time = s;
//初始化
$('#messageSendTime').datetimepicker({
startDate: s,
minView: "hour", //选择日期后,不会再跳转去选择时分秒
language: 'zh-CN',
format: 'yyyy-mm-dd hh:ii:ss',
todayBtn: 1,
autoclose: 1
});
//当选择器隐藏时,讲选择框只赋值给data里面的time
$('#messageSendTime').datetimepicker()
.on('hide', function (ev) {
var value = $("#messageSendTime").val();
self.time = value;
});
}
},
mounted: function () {
this.dateDefind();
}
}
总结:其实也就是在datetimepicker的设置里面添加一个事件,当选择器hide时,讲选择框的值赋值给data里面的time。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~