使用vue与bootstrap怎么实现一个时间选择器,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
在vue项目文件中引入
import './assets/css/bootstrap.min.css'
import "./assets/css/bootstrap-datetimepicker.min.css"
import './assets/js/bootstrap.min'
import './assets/js/bootstrap-datetimepicker.min.js'
三、具体代码如下:
<template>
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
</fieldset>
</form>
</div>
</template>
<script>
export default {
name: 'time',
data () {
return {
time: ''
}
},
methods: {
dateDefault(){
var d, s;
var self = this;
d = new Date();
s = d.getFullYear() + "-"; //取年份
s = s + (d.getMonth() + 1) + "-"; //取月份,date生成的月份为0-11
s += d.getDate() + " "; //取日期
s += d.getHours() + ":"; //取小时
s += d.getMinutes() + ":"; //取分
s += d.getSeconds(); //取秒
self.time = s;
$('.form_datetime').datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd hh:ii:ss',
//startDate: s, 默认开始时间
weekStart: 0, //一周从那一天开始,默认值为:0,范围:0-6
todayBtn: 1, //默认值:false,为true时,底部显示today,不选中,为linked时当天日期被选中
autoclose: 1, //选择一个日期后是否立即关闭此选择框
todayHighlight: 1, //高亮当前日期
startView: 2, // 日期时间选择器打开之后首先显示的视图,默认值为:2,0:hour,1:day,2:mouth,3:year,4:decade
forceParse: 0, //强制解析文本框的值
showMeridian: 1
});
$('#form_datetime').datetimepicker()
.on('hide', function (ev) {
var value = $("#form_datetime").val();
self.time = value;
});
}
},
mounted() {
//必须在组件渲染之后调用
this.dateDefault();
}
}
</script>
看完上述内容,你们掌握使用vue与bootstrap怎么实现一个时间选择器的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。