最好用的 8 款 React Datepicker 时间日期选择器测评推荐

简介: React 时间日期选择器(date-timepicker)组件,与表单、富文本、表格、拖拽等组件一样,是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12/24小时,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件,每一款都经过我实际测试,推荐给大家。

最好用的 8 款 React Datepicker 时间日期选择器测评推荐

本文完整版:《最好用的 8 款 React Datepicker 时间日期选择器测评推荐

React 时间日期选择器(date-timepicker)组件,与表单富文本表格拖拽等组件一样,是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12/24小时,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件,每一款都经过我实际测试,推荐给大家。

如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。

接下来介绍 8 款我自己常用的 React DateTimePicker 第三方组件,它们各有特色,希望能帮你找到合适你的选择器

  • React-Datepicker - 经典中的经典,常规场景闭眼选它
  • Material-UI date time pickers - 海量场景考验,质量保证,Material 风格
  • React-Day-Picker - 功能细致入微,支持键盘快捷键
  • React-Big-Calendar - 日历视图,适用行程管理,会议预约等场景
  • Ant design Datepicker - 国内 React 时间日期组件王者
  • Airbnb React Dates - 移动端友好,多浏览器支持,Airbnb 风格
  • Carbon design date picker - IBM Rcabon 开源企业级 React 库
  • React Rainbow datepicker - 精巧简洁的时间日期选择器

1. React-Datepicker - 经典中的经典,常规场景闭眼选它

react-datepicker

第一个推荐 React-datepicker,它是目前 React 框架里使用者最多的时间日期选择器,经典中的经典,这么一个小组件,Star 高达 7K 。当然,经典意味着保守,它没有设计感的样式,也没有炫酷的动画效果,也没有多语言。如果想求稳,直接上 React-datepicker 不会有任何错误。

  • 日期时间选择,日期范围选择
  • 使用 date-fns 作为日期库
  • 有日历视图,单击日期选择器时打开日历视图
  • 可显示日期所选范围
  • 可显示可选择的时间
  • 可禁用未来日期
  • 单击 X 按钮时清除日期选择器
  • 高度可定制化

2. Material-UI date time pickers - 海量场景考验,质量保证,Material 风格

02-Material-UI-datetime-pickers

真正好的时间日期选择器,需要经历各种场景下的迭代,而Material UI是全球流行的 React UI 组件库,海量的用户在各种奇怪的场景下使用它,所以它内置的组件可以说历经考验,其中又以它的Material-UI date time pickers时间选择器尤为优秀。Material 团队把这套时间日期组件从他们的 Material UI 中独立出来,放了个单独的 Material 时间日期选择器版本方便大家使用。

  • 内置日期选择器、日历选择器、时间选择器
  • 时间选择器是圆形的 android 风格
  • 可自定义语言
  • 自定义日期格式

3. React-Day-Picker - 功能细致入微,支持键盘快捷键

React-Day-Picker

react-day-picker 是好用轻便的 React 日期时间选择器。它旨在满足最常见的日期选择的需求,支持多语言,键盘快捷键,可创建多日历,UI 设计简单易用。

  • 时间日期选择、日期范围选择
  • 支持多语言
  • 键盘导航
  • 原生 TypeScript 支持
  • WAII-ARIA 支持
  • 使用 date-fns 作为日期库
  • 可创建多日历
  • 简单易用的 UI 设计

4. React-Big-Calendar - 日历视图,适用行程管理,会议预约等场景

react-big-calendar

react-big-calendar与其他推荐的日期选择器不同,它主要专注在日历选择上,是一个功能完善的日历组件,非常适合用于行程管理,会议预约等应用场景,你可以做出 Google Calender 的感觉,可自定义样式,代码简洁,UI 设计趁手。

  • 完整的日历解决方案
  • 非常适合用于行程管理,会议预约等应用场景

5. Ant design Datepicker - 国内 React 时间日期组件王者

Ant-design-Datepicker

国内 React UI 组件库王者 Ant design Datepicker,蚂蚁出品的 Ant 组件库基本是国内适用 React 框架构建项目时的首选,虽然 Ant DatePicker 组件不是独立组件,而是 Ant Design 的一部分,但它设计的如此优雅,代码如此简洁,这里必须要写进来推荐给大家。

  • 日期/时间选择器,无论什么场景,都能找到对应的样式
  • 详实的中文上手文档
  • 国内用户多,各类填坑文章丰富
  • 设计简洁高效

6. Airbnb React Dates - 移动端友好,多浏览器支持,Airbnb 风格

Airbnb-React-Dates

Airbnb react-dates 是 Airbnb 出品的 Airbnb 风的时间选择器,对移动端友好

、支持多语言、有「禁用日期」选择、多主题,可自定义 CSS。

  • 轻便小巧
  • 支持多语言
  • 可自定义配置
  • 范围选择
  • 禁用日期(某些日期不允许选,适合酒店选房场景)

7. Carbon design date picker - IBM Rcabon 开源企业级 React 库

Carbon-design-date-picker

Carbon design date picker 是 IBM 的 Carbon 数字体验开源设计系统的一员,企业级 React 组件库,覆盖了时下企业场景下日期时间选择器的所有需求,高度可维护、简单易用。

  • 日期输入、日历选择器、时间选择器
  • 日期范围选择器、日期字段,用户可手动输入
  • IBM 企业级稳定品质

8. React Rainbow datepicker - 精巧简洁的时间日期选择器

React-Rainbow-datepicker

React Rainbow 是一个靠谱的 UI 组件库,可以可以帮助开发者快速构建前端应用,内置 90 多个 React 常用组件。当然,我们这里推荐的是它的 React Rainbow datepicker时间日期选择器,轻便好用,只有 37KB,还有非常丰富的功能和样式供你选择。

  • 日期选择器
  • 时间选择器
  • 日期范围选择器
  • 代码简洁
  • 极简设计

React Date Time Picker 时间选择器总结

本文推荐了我自己使用多年的 8 款最好用的 React Date Time Picker 时间日期选择器,这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间,如果还想更进一步,推荐使用卡拉云,卡拉云内置时间日期选择器,无需懂任何前端,仅需拖拽即可快速生成。

09-kalacloud-timepicker

卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具,了解更多

卡拉云企业内部工具

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。

扩展阅读:

相关文章
|
前端开发 JavaScript 小程序
7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐
优秀的 React UI 组件库,帮我们节省开发时间,提高开发效率,统一设计语言。更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React UI 库,特别针对国内使用场景推荐。
1039 0
|
前端开发 JavaScript
react获取Datepicker组件日期
react获取Datepicker组件日期
|
前端开发 JavaScript NoSQL
5款 React 实时消息提示通知(Message/Notification)组件推荐与测评
React 消息提示通知组件(Message / Notification)是我们日常开发中经常使用的组件,它可用作与用户交互的反馈提示,信息提交成功、错误、操作警告等场景使用。原生JavaScript 提供了alert、prompt、confirm 等方法,这三个方法的不支持定制化,使用场景严重受限,特别是 alert 在浏览器外弹窗,体验非常糟糕。因此要想给用户提供良好的使用体验,我们需要封装一个定制化较好的 React 消息提示组件,这种组件看似简单,但也存在非常多深坑要小心,例如遮罩层、消失时间、点击事件的冒泡处理等。我自己在开发和研究 Message / Notification 功
|
前端开发 JavaScript NoSQL
最好用的 5 个 React select 多选下拉菜单组件测评推荐
在 React 开发中,单选 / 下拉 / 多选(select)功能使用非常普遍,React select 除了用鼠标点选外,还可以有更多样的功能,比如搜索过滤,树状结构,tab 分组,按组选择等。这些高级功能都可以在第三方组件中找到,本文记录了我自己使用多年最好用的 6 款 React select 多选下拉组件,每一款都经过我实际测试,推荐给大家。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。
1406 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
347 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
72 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
73 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
71 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
61 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
118 0