最好用的 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
扩展阅读:《最好用的 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 安装及实战 - 手把手教你搭建加密币实时价格看板
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云相关推荐
- 最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
- 多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
- 12款最佳的 WordPress 语法高亮插件推荐
语法高亮工具增强了代码的可读性,美化了代码,让程序员更容易维护.语法高亮提供各种方式由以提高可读性和文本语境,尤其是对于其中可以结束跨越多个页面的代码,以及让开发者自己的程序中查找错误.在这篇文章中, ...
- 2020年国内外12款自助式BI工具最全测评
BI(Business Intelligence)即商业智能,越来越多的智能软件供应商推出可视化数据分析工具,应对企业业务人员的大数据分析需求.然而如果你觉得不是数据分析专业.没有挖掘算法基础就无法使 ...
- 如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
- 解决select 下拉框选择器 input输入框 、时间日期选择器el-date-picker 赋值后,出现无法修改选中更改问题
ElementUI时间选择器,传入时间赋值后之后无法改变 // ElementUI的表格组件<el-date-pickersize="mini"style="wid ...
- 【vue开发问题-解决方法】(五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
- 12款vue后台管理系统(可下载)
vue官方的后台管理仪表盘框架是:vue-admin,除此之外还有很多其他优秀的后台管理集成框架,正所谓前人栽树,后人乘凉.特此记录一下,方面以后要用. 参考下载地址:12款优秀的vue后台管理系统模 ...
- Android学习之Image操作及时间日期选择器
一.基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类. 1: <ImageView 2: android:id=& ...
最新文章
- php随机跳转,Nginx实现404页面跳转到任意随机页面
- ScrollView HorizontalScrollView
- HTML5 - Canvas动画样例(谷歌弹跳球)
- 究竟什么时候该使用MQ?
- 三角数数列与杨辉三角
- Flutter自定义布局套路
- TensorFlow共享变量
- Thread类的常用方法
- 2019年7月28日解决战网BLZBNTBNA00000005BLZBNTBNA00000006BLZBNTBTS0000005DBLZBNTBTS0000004A 007D0 008A4 00840
- C# 使用Magick.NET进行图片格式转换,修改尺寸(.ico .jpg .png .gif .bmp),解决png转jpg透明变黑底问题
- 异步处理Promise
- 静态市盈率和动态市盈率
- 首发:Meltdown漏洞分析与实践
- Simulink统一模块大小
- python根据四点坐标截取图片
- 公钥和私钥的完全解释(包括对称算法和非对称算法、RSA解释)
- 关于手机内部存储,外部存储
- 2D,2.5D,3D封装结构
- 吕思清老师口中的小艺是何许人也
- Java实现邮箱验证
热门文章
- Unity+C#开发笔记(四)| 如何判断两次按键的时间间隔 | ╭(●`∀´●)╯╰(●’◡’●)╮
- 适合初学者的 7 个有趣的区块链项目创意
- Python机器学习应用 case2 学生上网分析(DBSCAN)
- python 经典脚本文件_Python3.5文件读与写操作经典实例详解
- C语言结构体指针初始化(转)
- 今天工作的效率不高,才写了一个打印管理类
- linux shell ps命令,linux shell ps详解
- vscode win10笔记本 蓝屏_笔记本 Win10 经常蓝屏,如何解决?
- 编写autorun病毒免疫工具
- 由全面战争与像素海盗想到的