效果图如下：

首先安装：vue-flatpickr-component 时间选择器库

npm安装：
npm install vue-flatpickr-component --save
Yarn安装：
yarn add vue-flatpickr-component

<template>
 <div class="form-group row pb-4 border-bottom">
   <label class="col-sm-2 col-form-label">考试时间:</label>
   <div class="col-sm-10 p-0">
     <div class="input-group">
       <flat-pickr v-model="data" :config="config" placeholder="选择日期"></flat-pickr>
       <div class="input-group-append">
         <button class="btn input-group-text" type="button" title="Toggle" data-toggle>
           <i class="fa fa-calendar-alt">
             <span aria-hidden="true" class="sr-only">Toggle</span>
           </i>
         </button>
       </div>
     </div>
   </div>
 </div>
<template>

<script>
import flatPickr from 'vue-flatpickr-component';	//引入flatpickr组件
import 'flatpickr/dist/flatpickr.css';				//引入他的css样式
import {Mandarin} from 'flatpickr/dist/l10n/zh.js';	//引入普通话语言包

import 'bootstrap/dist/css/bootstrap.css';			//需要安装bootstrap

export default {
  components: {
    flatPickr
  },
  data() {
   return {
    data: null,
    config: {
      wrap: true,
      altInput: true,
      dateFormat: "U",	//data变成时间戳
      altFormat: 'Y-m-d H:i',	//选择时显示的时间
      enableTime:true,			//选择小时分种
      defaultHour: 8,			//默认8点
      time_24hr: true,			//时间24小时制
      locale: Mandarin			//中文
    },
   }
  }
}
</script>

<style>
.input-group .form-control{
    background: #fff;
    border-radius: 3px 0 0 3px!important;
}
</style>

Config Option：

日期格式字符: