使用vue與bootstrap怎么實現一個時間選擇器

使用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怎么實現一個時間選擇器的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！