vue使用flatpickr時間選擇器組件

效果圖如下：

首先安裝：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：

參數	類型	默認值	描述
altFormat	string	“F j, Y”	altInput的日期格式
altInput	Boolean	false	是否使用某種用戶友好的方式來顯示日期時間。
altInputClass	String	“”	添加到input上的自定義class類。例如bootstrap用戶可能需要添加一個form-control class。
allowInput	boolean	false	是否允許用戶直接在輸入框中輸入日期。
clickOpens	boolean	true	是否在點擊輸入框時打開日期時間選擇界面。如果你想通過手動.open()方法來打開，該選項設置爲false。
dateFormat	string	“Y-m-d”	設置日期顯示格式。
defaultDate	String/Date Object	null	設置一個初始的日期。
disable	array	[]	被禁用的日期。
enableTime	boolean	false	是否啓用時間選擇。
enableSeconds	boolean	false	在時間選擇器中是否可以選擇秒。
noCalendar	boolean	false	是否隱藏日曆。
hourIncrement	integer	1	小時輸入框的步長。
minuteIncrement	integer	5	分鐘輸入框的步長。
inline	boolean	false	是否以內聯的方式顯示日曆。
static	boolean	false	日期選擇器位於包裹容器的位置。
wrap	boolean	false	包裹元素。
maxDate	String	null	用戶可以選擇的最大日期。
minDate	String	null	用戶可以選擇的最小日期。
onChange	function(dateObject, dateString)	null	每次日期被選擇的時候都觸發該函數。
onOpen	function(dateObject, dateString)	null	每次日曆被打開時都會觸發該函數。
onClose	function(dateObject, dateString)	null	每次日曆被關閉時都會觸發該函數。
parseDate	function	false	接收一個日期字符串並返回一個日期對象。
shorthandCurrentMonth	boolean	false	以簡寫方式顯示月份
weekNumbers	boolean	false	是否在日曆中顯示星期數。
time_24hr	boolean	false	是否以24小時格式來顯示時間。
utc	boolean	false	日期將會被解析、格式化和顯示爲UTC格式。
prevArrow	string	<	向前箭頭圖標。
nextArrow	string	>	向後箭頭圖標。

日期格式字符:

字符	描述	示例
d	月份中的天數，如果不滿2個數字的會前導0。	01 - 31
D	一個星期中某一天的簡寫文本表示	Mon - Sun
l(小寫的L)	一個星期中某一天的文本表示	Sunday - Saturday
j	不帶前導0的月份中的天數	1 - 31
J	帶序號後綴，不帶前導0的月份中的天數	1st, 2nd, to 31st
w	使用數字來代表星期中的某一天	0 (星期天) - 6 (星期六)
F	月份的完整文本表示	January - December
m	使用數字來表示月份，前導帶0。	01 - 12
n	使用數字來表示月份，前導不帶0。	1 - 12
M	月份的簡寫文本表示	Jan - Dec
U	時間戳	1413704993
y	兩個數字代表的年	99 or 03
Y	4個數字代表的年	1999 or 2003
H	24小時制	00 to 23
h	12小時制	1 to 12
i	分鐘	00 to 59
S	秒	（不滿2位數補0） 00 to 59
s	秒	0 - 59
K	AM/PM	AM or PM