本文概述
- 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
你可以在React应用程序中使用的10个最佳Datepicker组件中的顶级组件。
10. React Datepicker CS 【十大最佳开源ReactJS Datepicker组件】现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022G163-0.png)
文章图片
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 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022K013-1.png)
文章图片
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 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022IN8-2.gif)
文章图片
该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 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022J596-3.png)
文章图片
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 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022HW6-4.png)
文章图片
React Input是在输入中选择日期的简单组件。所有用CSS编写的样式都在style / index.css中。你需要做的就是导入组件:
import Calendar from 'react-input-calendar'<
Calendar format='DD/MM/YYYY' date='4-12-2014' />
并了解有关组件支持的属性的更多信息。
5. Input Moment 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022H620-5.png)
文章图片
Input Moments是一个基于momentjs的基于React的日期时间选择器, 其设计来自自由职业者, 而图标来自ionicon。
4. React Datepicker 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022I325-6.png)
文章图片
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 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022K596-7.png)
文章图片
React Day Picker是一个灵活的日期选择器。它没有依赖关系, 可以完全自定义, 提供ARIA支持, 可以本地化并且重量小于8KB。
2. React Infinite Calendar 现场演示
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022J3L-8.png)
文章图片
无限滚动日期选择器是React的组件, 具有本地化, 范围选择, 主题, 键盘支持等。该组件的主要功能是:
- 无限滚动–保持滚动, 保持滚动
- 灵活–最小/最大日期, 禁用日期, 禁用天数等
- 可扩展–添加日期范围选择, 多个日期选择或创建自己的HOC!
- 本地化和翻译-法语, 西班牙语!
- 可定制的–根据你的内心需求定制和主题化。
- 年份选择–用于逐年快速跳跃
- 键盘支持
- 事件和回调-beforeSelect, onSelect, onScroll等
- 适合移动设备–在手机上如丝般流畅地滚动
![十大最佳开源ReactJS Datepicker组件](http://img.readke.com/220520/22022M592-9.png)
文章图片
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组件可以响应, 并且它是开源的, 请在评论框中与社区共享。
推荐阅读
- 5个最佳ReactJS甘特图解决方案
- 7个最佳jQuery图像和内容滑块插件
- 我忘了Android Studio主密码
- 在导航菜单中的Android应用程序中创建alertdialog以注销
- 如何在TableRow中使用Android填充宽度制作切换按钮
- 覆盖MFMailComposeViewController的UIAppearance属性
- App Store和Ad Hoc已停用
- Appirater不要求审查
- 将本地db(Sqlite)与服务器db android同步