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

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

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

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

日期时间选择，日期范围选择使用 date-fns 作为日期库有日历视图，单击日期选择器时打开日历视图可显示日期所选范围可显示可选择的时间可禁用未来日期单击 X 按钮时清除日期选择器高度可定制化 2. Material-UI date time pickers - 海量场景考验，质量保证，Material 风格

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

内置日期选择器、日历选择器、时间选择器时间选择器是圆形的 android 风格可自定义语言自定义日期格式 3. React-Day-Picker - 功能细致入微，支持键盘快捷键

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

时间日期选择、日期范围选择支持多语言键盘导航原生 TypeScript 支持WAII-ARIA 支持使用 date-fns 作为日期库可创建多日历简单易用的 UI 设计 4. React-Big-Calendar - 日历视图，适用行程管理，会议预约等场景

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

完整的日历解决方案非常适合用于行程管理，会议预约等应用场景 5. Ant design Datepicker - 国内 React 时间日期组件王者

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

日期/时间选择器，无论什么场景，都能找到对应的样式详实的中文上手文档国内用户多，各类填坑文章丰富设计简洁高效 6. Airbnb React Dates - 移动端友好，多浏览器支持，Airbnb 风格

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

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

轻便小巧支持多语言可自定义配置范围选择禁用日期（某些日期不允许选，适合酒店选房场景） 7. Carbon design date picker - IBM Rcabon 开源企业级 React 库

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

日期输入、日历选择器、时间选择器日期范围选择器、日期字段，用户可手动输入IBM 企业级稳定品质 8. React Rainbow datepicker - 精巧简洁的时间日期选择器

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

日期选择器时间选择器日期范围选择器代码简洁极简设计 React Date Time Picker 时间选择器总结

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

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

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

扩展阅读：

最好的 6 款 React 后台管理系统模板和框架React Router 6 (React路由) 最详细教程