最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云

本文首发：《最好用的 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

扩展阅读：《