十大最佳开源ReactJS Datepicker组件 _ReactJS

本文概述

10. React Datepicker CS
9. RC Datepicker
8. React Bootstrap Datepicker
7. React Calendar
6. React Input Calendar
5. Input Moment
4. React Datepicker
3. React Day Picker
2. React Infinite Calendar
1. React Dates

日期选择器是一种中性, 必要且非常常用的组件, 它使用户可以轻松选择日期, 而不必知道输入所期望的格式, 用户只需要在简单的UI之后提供日期即可。对于React, 有很多datepicker组件, 因此为了方便起见, 我们收集了该实用程序中10个最重要的组件。
你可以在React应用程序中使用的10个最佳Datepicker组件中的顶级组件。
10. React Datepicker CS 【十大最佳开源ReactJS Datepicker组件】现场演示

文章图片
React datepicker是一个有用且非常简单的组件, 它显示了简化的datepicker。它的初始化也非常简单, 因为它仅接收5个属性：

range {Array}-你可以自定义年份范围
onChange {功能}-用户设置日期时
locale {String}-默认为en, 也可以使用zh
Disabled {Boolean}-默认为false, 你可以传入true以禁用组件
值{String}-设置默认日期

import React from 'react'; // Import Datepicker import ReactDatePicker from 'react-date-picker-cs'; export default class App extends React.Component { constructor(props, context) { super(props, context); // Initial state with date this.state = { selectedDate: '2017-08-13' }; // This binding is necessary to make `this` work in the callback this.handleLog = this.handleLog.bind(this); }handleLog(date) { this.setState({ selectedDate: date }); }render() { return ( < div> < ReactDatePicker onChange={this.handleLog} range={[2013, 2020]} value=http://www.srcmini.com/{this.state.selectedDate} disabled={true} /> < /div> ); } }

9. RC Datepicker 现场演示

文章图片
RC Datepicker是一个可以与React一起使用的体面漂亮的日期选择器。 DatePicker和DatePickerInput使用Moment.js, 因此它们支持moment / locale内的任何语言环境。要选择语言环境, 你需要在应用程序中任何地方要求日期选择器或时刻之前需要它：这样, 它将自动选择为当前语言环境。

import React from 'react'; // Import Datepicker import { DatePicker, DatePickerInput } from 'rc-datepicker'; // Import the default style import 'rc-datepicker/lib/style.css'; export default class App extends React.Component { constructor(props, context) { super(props, context); // Initial state with date this.state = { // or Date or Moment.js selectedDate: '2017-08-13' }; // This binding is necessary to make `this` work in the callback this.onChange = this.onChange.bind(this); }onChange(date) { this.setState({ selectedDate: date }); }render() { return ( < div> < DatePickerInput onChange={this.onChange} value=http://www.srcmini.com/{this.state.selectedDate} className='my-custom-datepicker-component' /> {/* this renders only a fixed datepicker */} < DatePicker onChange={this.onChange} value=http://www.srcmini.com/{this.state.selectedDate} /> < /div> ); } }

8. React Bootstrap Datepicker 现场演示

文章图片
该Datepicker与React 0.14.x和0.15.x兼容。它是基于基础的, 并且需要Bootstrap React框架作为依赖项(可以自动安装), 如果还没有安装Bootstrap React Library。
作为每个基于Bootstrap的库, 你需要从本地CSS副本或CDN导入一些Bootstrap主题：

< link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">

然后在React中初始化datepicker：

import React from 'react'; // Import Datepicker import DatePicker from "react-bootstrap-date-picker"; // Import Bootstrap components import FormGroup from 'react-bootstrap/lib/FormGroup'; import ControlLabel from 'react-bootstrap/lib/ControlLabel'; import HelpBlock from 'react-bootstrap/lib/HelpBlock'; export default class App extends React.Component { constructor(props, context) { super(props, context); // Initial state with date this.state = { selectedDate: new Date().toISOString() }; // This binding is necessary to make `this` work in the callback this.onChange = this.onChange.bind(this); }onChange(value, formattedValue) { this.setState({ value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z" formattedValue: formattedValue // Formatted String, ex: "11/19/2016" }); }componentDidUpdate() { // Access ISO String and formatted values from the DOM. var hiddenInputElement = document.getElementById("example-datepicker"); console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z" console.log(hiddenInputElement.getAttribute('data-formattedvalue')) // Formatted String, ex: "11/19/2016" }render() { return ( < div> < FormGroup> < ControlLabel> Label< /ControlLabel> < DatePicker id="example-datepicker" value=http://www.srcmini.com/{this.state.selectedDate} onChange={this.onChange} /> < HelpBlock> Help< /HelpBlock> < /FormGroup> < /div> ); } }

7. React Calendar 现场演示

文章图片
React Calendar不仅是日历组件, 还是一个模块化工具箱, 用于在React中构建与日历相关的所有内容, 例如Datepickers。它处于Alpha初期, 因此文档和更多功能将陆续到来。但是它仍然可以使用：

import React from 'react'; // Import Datepicker import moment from 'moment'; // Import Calendar import { Calendar } from 'react-calendar'; export default class App extends React.Component { constructor(props, context) { super(props, context); this.state = { date: moment().startOf('year') } }render() { return ( < div> {/* Base calendar component */} < Calendar weekNumbers={true} size={2} startDate={this.state.date} date={this.state.date} endDate={this.state.date.clone().endOf('year')} mods={ [ { date: moment(), classNames: ['current'], component: ['day', 'month', 'week'] } ] }/> < /div> ); } }

默认情况下没有样式, 但是less / bootstrap-theme.less中包含使用引导程序的示例主题。
6. React Input Calendar 现场演示

文章图片
React Input是在输入中选择日期的简单组件。所有用CSS编写的样式都在style / index.css中。你需要做的就是导入组件：

import Calendar from 'react-input-calendar'< Calendar format='DD/MM/YYYY' date='4-12-2014' />

并了解有关组件支持的属性的更多信息。
5. Input Moment 现场演示

文章图片
Input Moments是一个基于momentjs的基于React的日期时间选择器, 其设计来自自由职业者, 而图标来自ionicon。
4. React Datepicker 现场演示

文章图片
React Datepicker是React的一个非常简单且可重用的datepicker组件。你需要分别安装React和Moment.js, 因为这些依赖项未包含在软件包中。以下是有关如何在React视图中使用Datepicker的简单示例。你还需要从此软件包中获取css文件(或提供你自己的文件)：

import React from 'react'; import DatePicker from 'react-datepicker'; import moment from 'moment'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; class Example extends React.Component { constructor(props) { super(props) this.state = { startDate: moment() }; this.handleChange = this.handleChange.bind(this); }handleChange(date) { this.setState({ startDate: date }); }render() { return < DatePicker selected={this.state.startDate} onChange={this.handleChange} /> ; } }

3. React Day Picker 现场演示

文章图片
React Day Picker是一个灵活的日期选择器。它没有依赖关系, 可以完全自定义, 提供ARIA支持, 可以本地化并且重量小于8KB。
2. React Infinite Calendar 现场演示

文章图片
无限滚动日期选择器是React的组件, 具有本地化, 范围选择, 主题, 键盘支持等。该组件的主要功能是：

无限滚动–保持滚动, 保持滚动
灵活–最小/最大日期, 禁用日期, 禁用天数等
可扩展–添加日期范围选择, 多个日期选择或创建自己的HOC！
本地化和翻译-法语, 西班牙语！
可定制的–根据你的内心需求定制和主题化。
年份选择–用于逐年快速跳跃
键盘支持
事件和回调-beforeSelect, onSelect, onScroll等
适合移动设备–在手机上如丝般流畅地滚动

1. React Dates 现场演示

文章图片
React Dates是一个易于国际化的, 适合移动设备的Web日期选择器库。 SingleDatePicker是一个完全受控的组件, 允许用户选择单个日期。你可以使用date和onDateChange属性控制选定的日期, 如下所示。 SingleDatePicker还可以管理通过键入输入的部分日期的内部状态(尽管在这种情况下, 只有在完全输入日期后onDateChange才会触发)。它的初始化非常简单：

import React from 'react'; // Import Moment and React Dates import moment from 'moment'; import {SingleDatePicker } from 'react-dates'; import 'react-dates/lib/css/_datepicker.css'; export default class App extends React.Component { constructor(props, context) { super(props, context); this.state = { date: moment() } }render() { return ( < div> < SingleDatePicker date={this.state.date} // momentPropTypes.momentObj or null onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired focused={this.state.focused} // PropTypes.bool onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired /> < /div> ); } }

如果你知道另一个很棒的datepicker组件可以响应, 并且它是开源的, 请在评论框中与社区共享。