bob体育官方平台
vue2.0 与 bootstrap datetimepicker的重新整合使用实例_vue.js_脚本之家

1.在众多的类型中,大家都会动用日期插件,然后当自家在vue中使用bootstrap datetimepicker时发掘双向绑定不起功用了,bootstrap datetimepicker修正的日期不会协同到data中,上面看自身的解决方案:

bootstrap datetimepicker插件没有分钟接纳器,若是要想选取的时光标准到秒未有议程序调控制,固然能够配备format:'yyyy-mm-dd hh:ii:ss',会将分钟增添到输入框中,可是无法调整分钟数值,默觉稳当前客商端的年月的分钟。

  选择发送时间:    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 +  + "-";//取月份 s += d.getDate() + " "; //取日期 s += d.getHours() + ":"; //取小时 s += d.getMinutes() + ":"; //取分 s += d.getSeconds(); //取秒 self.time = s; //初始化 $.datetimepicker({ startDate: s, minView: "hour", //选择日期后,不会再跳转去选择时分秒 language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', todayBtn: 1, autoclose: 1 }); //当选择器隐藏时,讲选择框只赋值给data里面的time $.datetimepicker() .on { var value = $.val(); self.time = value; }); } }, mounted: function ; } } 

本示例改正bootstrap datetimepicker源代码,假若布置了体现分钟format:'......ss',将会给分钟选用器层增多秒钟接纳下拉框,能够自定义接受时间的分钟部分,效果如下

总括:其实也正是在datetimepicker的装置里面增加二个事变,当选拔器hide时,讲采纳框的值赋值给data里面包车型大巴time。

bootstrap datetimepicker增多分钟接收下拉框效果图:

如上正是本文的全体内容,希望对大家的读书抱有利于,也希望我们多多指教脚本之家。

bootstrap datetimepicker加多分钟采用下拉框步骤:

1)增多下拉框,找到this.picker.find('.datetimepicker-minutes td'卡塔尔(قطر‎.html那句,大约在709行左近,改为下边包车型地铁

//添加datetimepicker下拉框,如果配置要选择秒,否则不添加 var addSec = /,s{1,2},/.test(',' + this.format.parts.join, sSec = addSec ? '' : ''; this.addSec = addSec; if  { var orgSec = this.viewDate.getSeconds(); for (var _i = 0; _i < 60; _i++) sSec += '' + (_i < 10 ? '0' : '') + _i + ''; sSec += ''; } this.picker.find('.datetimepicker-minutes td').html;

2)修改容器点击事件。差相当少846行,扩充下边包车型地铁中灰语句,制止采取select分钟时日期弹出框隐瞒

click: function  { e.stopPropagation;///防止选择秒钟选择器日期控件层隐藏 if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return;

3)然后继续往下找到case 'span'语句,差相当的少916,校订里面秒钟获取情势,如下所示

case 'span': if (!target.is { var year = this.viewDate.getUTCFullYear(), month = this.viewDate.getUTCMonth(), day = this.viewDate.getUTCDate(), hours = this.viewDate.getUTCHours(), minutes = this.viewDate.getUTCMinutes(),//修改datetimepicker秒钟获取方式 seconds = this.addSec ? this.picker.find : this.viewDate.getUTCSeconds();
上一篇:没有了 下一篇:国家知识产权局公告第六十一号
返回顶部