介紹

本文主要介紹幾個Vue的時間日期選擇器組件，目的在於讓開發者們多一些選擇，不管是從功能還是從樣式，都可以選擇一個適合的組件，這些組件沒有絕對的好與不好，就看個人如何選擇了，以下分別介紹十一個日期選擇器，包含移動端和PC端，且全部開源：

1、vue-DateTime

Vue的移動友好型DateTime選擇器；該Vue組件支持日期，日期時間和時間模式，i18n（國際化）和禁用日期：

https://github.com/mariomka/vue-datetime

2、vue-hotel-datepicker

Vue.js的響應日期範圍選擇器，它顯示所選的夜晚數量，並允許幾個有用的選項，例如自定義入住/退房規則，本地化支持等：

https://github.com/krystalcampioni/vue-hotel-datepicker

npm install vue-hotel-datepicker --save

import HotelDatePicker from 'vue-hotel-datepicker'

export default {
 components: {
 HotelDatePicker,
 },
}

3、vue-datetime-picker

使用Eonasdan的bootstrap DateTime picker插件實現DateTime picker控制項：

https://github.com/Haixing-Hu/vue-datetime-picker

4、VueCtkDateTimePicker

用於選擇日期和時間（範圍模式）,該Vue日期選擇器組件也支持暗模式

https://github.com/chronotruck/vue-ctk-date-time-picker

5、VueRangedatePicker

範圍日期選擇器，用法簡單。該組件易於使用，並具有帶範圍選擇的日期選擇器。

https://github.com/bliblidotcom/vue-rangedate-picker

6、Vuetify Daterange Picker

Vuetify JS缺少日期範圍選擇器，與@ vue / cli 3和最新的Vuetify兼容

https://github.com/praveenpuglia/vuetify-daterange-picker

7、Vue date pick

基於Vue的輕量級和移動友好型日期時間選擇器。Vue date pick強調在所有螢幕尺寸上的性能，優雅且可用的用戶介面以及配置的簡單性。不依賴CSS框架或日期庫。體積小於5KB

https://github.com/dbrekalo/vue-date-pick

8、Vue Date Picker

受material design啟發的Vue日期選擇器組件

https://github.com/ridewn/vue-date-picker

9、vue-timeselector

簡單的可自定義Vue.js時間選擇器組件。Vue時間選擇器是Vue（2.x）組件，可根據多個選項選擇時間。

https://github.com/alexiscolin/vue-timeselector

10、vue-mj-daterangepicker

Vue.js日期範圍選擇器，具有多個範圍和預設，此組件提供對vue 2.x +版本的支持

https://github.com/damienroche/vue-mj-daterangepicker

11、VueDT

一個非常輕量級Vuejs日期和時間選擇器組件，該輕量級組件只有5kb的大小，可以進一步縮小和壓縮。

https://github.com/nkoehring/vuedt

總結

作為Vue開發人員，擁有並使用正確的Vue Component無疑會簡化你的應用開發。首選特定某個Vue組件的項都歸結為它們的用途。功能齊全，易於使用，可移動性或簡便性，以上時間日期選擇器全部都是免費開源的，部分介紹為瀏覽器翻譯，不過你隨時可以到Github上查看使用，Enjoy it！