vue与bootstrap实现时间选择器的示例代码

一、下载bootstrap-datetimepicker时间选择器js，css文件。1.github地址:bootstrap-datetimepicker2.官方网

一、下载bootstrap-datetimepicker时间选择器js，css文件。

1. github地址:bootstrap-datetimepicker

2. 官方网站地址:官网bootstrap-datetimepicker地址，有具体的例子与解释

二、在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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。