共计 3123 个字符，预计需要花费 8 分钟才能阅读完成。
本文首发：《最好用的 12 款 Vue Timepicker 工夫日期选择器测评举荐 – 卡拉云》
Vue 工夫日期选择器（date-timepicker）组件在应用 Vue 框架开发中应用十分频繁。vue timepicker 除了根底抉择日期工夫外，还有十分多样的性能配合不同场景应用，比方 12/24 小时，禁止抉择某些日期，高亮某些日期，夜间模式，多语言，酒店订单的特地场景等。本文记录了我本人应用多年最好用的 12 款 vue timepicker 组件，每一款都通过我理论测试，举荐给大家。
如果你正在搭建后盾管理工具，又不想解决前端问题，举荐应用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API，无需懂前端，仅需拖拽即可疾速搭建属于你本人的后盾管理工具，一周工作量缩减至一天，详见本文文末。
接下来介绍 12 款我本人罕用的 Vue Timepicker 第三方组件，它们各有特色，心愿能帮你找到适合你的选择器
- Vuejs Datepick – 根底款王者，从工夫到日期全笼罩
- Elegant Date Picker for Vue – 反对夜间模式，自定义语言，自定义格局
- Material Vue DateRange Picker – 内置工夫范畴抉择，抉择更快捷
- Vue Date Range Picker – 无 JQuery 依赖，丰盛抉择性能
- Vue Lendar – 极简设计，代码简洁
- Vue Vanilla – 12/24 小时制，可「高亮显示」和「禁用显示」日期
- Airbnb Datepicker – Airbnb 格调，对挪动端敌对，多浏览器反对
- Vue Hotel Datepicker – 针对酒店选房类场景特地优化
- Vue Date Time – 对挪动端敌对，i18n 多语言
- Vue CTK Date Time Picker Component – 可定义色彩，有禁用抉择
- Vue MJ DateRange Picker – 一键范畴抉择，自定义主题，多语言
- Vuejs Date Time Picker – 笨重，可自定义色彩，工夫日期同选
1. Vuejs Datepick – 根底款王者，从工夫到日期全笼罩
先来举荐 Vuejs Datepicker，它涵盖了日期、工夫、工夫日期多个纬度的工夫抉择。如果 UI 上没有太多要求，间接上，没太多问题。
- 日期选择器
- 工夫日期选择器
- 日期范畴选择器
- 工夫选择器
- 反对 pkg Module
扩大浏览：《最好用的 7 个 Vue Tree select 树形组件》
2. Elegant Date Picker for Vue – 反对夜间模式，自定义语言，自定义格局
Elegant Date Picker for Vue 除了工夫选择器的根底性能外，还蕴含了夜间模式，自定义语言，自定义日期格局，它的款式能够随心调整。
- 日期范畴
- 自定义语言
- 自定义日期格局
- 反对夜间模式
- 应用 CSS 变量自定义款式
扩大浏览：《Vue 搭建带预览的「上传图片」治理后盾》
3.Material Vue DateRange Picker – 内置工夫范畴抉择，抉择更快捷
Material Vue DateRange Picker 自带工夫范畴抉择，一键最初 7 天，最初 30 天，或者依据利用场景有针对性的设置一键抉择范畴。
- 内置工夫抉择范畴选项
- 日期选择器
- 日期范畴选择器
- 工夫选择器
扩大浏览：《如何在 Vue 中应用 Chart.js – 手把手教你搭可视化数据图表》
4. Vue Date Range Picker – 无 JQuery 依赖，丰盛抉择性能
Vue Date Range Picker 没有 JQuery 依赖，所有性能在一个 UI 上排的整整齐齐，高深莫测。
- 日期范畴选择器
- 工夫选择器
- 日期选择器
- 没有 JQuery 依赖
- 灵感来自 Bootstrap 日期范畴选择器
扩大浏览：《如何在 Vue 中导出数据至 Excel 表格》
5. Vue Lendar – 极简设计，代码简洁
Vue Lendar 走极简设计路线的，不仅代码简洁清晰，设计也极其简洁。
- 日期选择器
- 工夫选择器
- 日期范畴选择器
- 代码简洁
- 极简设计
扩大浏览：《如何在 Vue 中退出图表 – Vue echarts 应用教程》
6. Vue Vanilla – 12/24 小时制，可「高亮显示」和「禁用显示」日期
Vue Vanilla 日期 / 工夫选择器比其余几个的劣势在于它有「高亮显示」和「禁用显示」日期的性能，很适宜疏导用户抉择和标记哪些日期用户不能抉择的场景。
- 日期 / 工夫选择器
- 突出显示和禁用日期，
- 12/24 小时制
扩大浏览：《顶级好用的 5 款 Vue table 表格组件测评与举荐》
7. Airbnb Datepicker – Airbnb 格调，对挪动端敌对，多浏览器反对
Airbnb Datepicker 是 Airbnb 格调的工夫选择器，对挪动端敌对，有「禁用日期」抉择。
- 轻便玲珑
- 可自定义配置
- 范畴抉择
- 禁用日期
- 多浏览器反对，甚至反对 IE9
扩大浏览：《最好用的 7 款 Vue admin 后盾管理系统测评》
8. Vue Hotel Datepicker – 针对酒店选房类场景特地优化
Vue Hotel Datepicker 特地针对酒店类选房场景优化，挪动端抉择日期可滑动操作，对挪动端敌对
- 日期 / 工夫选择器
- 特地为酒店预约场景定制
- 设计简洁高效
扩大浏览：《最好用的 7 款 Vue 富文本编辑器》
9. Vue Date Time – 对挪动端敌对，i18n 多语言
Vue Date Time android 风，对挪动端反对敌对，i18n 多语言，反对 12/24 小时制切换。
- 挪动端敌对
- 工夫 / 日期选择器
- 12/24 小时制
- 自定义日期格局
- 最小 / 最大日期工夫
- i18n 多语言
扩大浏览：《手把手教你 Vue3+Node.js+Expres+MySQL 环境搭建》
10.Vue CTK Date Time Picker Component – 可定义色彩，有禁用抉择
Vue CTK Date Time Picker Component 可定制色彩，有禁用工夫抉择。
- 日期 / 工夫选择器
- 日期范畴选择器
- 禁用日期显示
- 可定制的色彩
扩大浏览：《最好的 5 款翻译 API 接口比照测评》
11.Vue MJ DateRange Picker – 一键范畴抉择，自定义主题，多语言
Vue MJ DateRange Picker 性能相当全，反对多语言，自定义主题以及自定义 UI 面板，一键范畴抉择，禁止显示过来工夫。尽管性能很全，但代码仍然简洁笨重。
- 日期范畴选择器
- 自定义主题
- 多语言反对
- 自定义面板
- 禁止显示过来日期
- UI 古代
- 代码简洁
扩大浏览：《最好的 6 个收费天气 API 接口比照测评》
12. Vuejs Date Time Picker – 笨重，可自定义色彩，工夫日期同选
Vuejs Date Time Picker 反对日期工夫抉择，可 12/24 小时切换，更换色彩。
- 日期工夫选择器
- 12/24 小时制
- 日期选择器
- 工夫选择器
- 自定义色彩
扩大浏览：《订单管理系统 (OMS) 搭建实战 – 低代码拖拽定制订单管理系统》
Vue Date Time Picker 工夫选择器总结
本文举荐了我本人应用多年的 12 款最好用的 Vue Date Time Picker 工夫日期选择器，这其中肯定有一款适宜你。这些第三方组件曾经帮咱们节俭大量开发工夫，如果还想更进一步，举荐应用卡拉云，卡拉云内置工夫选择器，无需懂任何前端，仅需拖拽即可疾速生成。
卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。
扩大浏览：
- 最好的 5 款翻译 API 接口比照测评
- 最好用的七大顶级 API 接口测试工具
- 最好用的 5 款 React 富文本编辑器
- Postman 应用教程 – 手把手教你 API 接口测试
- 手把手教你 Vue3+Node.js+Expres+MySQL 环境搭建
- Axios 教程：Vue + Axios 装置及实战 – 手把手教你搭建加密币实时价格看板
