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

61次阅读

共计 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 装置及实战 – 手把手教你搭建加密币实时价格看板
正文完
 0