十大最佳开源ReactJS Datepicker组件

本文概述

• 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

现场演示

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={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={this.state.selectedDate}
                    className='my-custom-datepicker-component'
                />

                {/* this renders only a fixed datepicker */}
                <DatePicker onChange={this.onChange} value={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={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组件可以响应, 并且它是开源的, 请在评论框中与社区共享。