Топ 10: Лучшие открытые компоненты ReactJS Datepicker

Средство выбора даты — это нейтральный, необходимый и очень используемый компонент, который позволяет пользователю легко выбирать дату, не зная формата, который ожидает ввод, пользователю просто нужно указать дату после простого пользовательского интерфейса. Для React существует множество компонентов DatePicker, поэтому, чтобы упростить вам задачу, мы собрали 10 наиболее впечатляющих компонентов этой утилиты.

Наслаждайтесь нашим топом из 10 лучших компонентов Datepicker, которые вы можете использовать в своем приложении React.

10. Реагировать на Datepicker CS

Живая демо

React datepicker — это полезный и очень простой компонент, который отображает упрощенный DatePicker. Его инициализация также очень проста, поскольку он получает только 5 свойств:

• range {Array} — Вы можете настроить диапазон года
• onChange {Function} — когда пользователь устанавливает дату
• locale {String} — по умолчанию enВы также можете использовать zh
• disabled {Boolean} — по умолчанию falseВы можете пройти в true отключить компонент
• value {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 (
);
}
}

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 (
{/* this renders only a fixed datepicker */}
);
}
}

8. React Bootstrap Datepicker

Живая демо

Этот DatePicker совместим с React 0.14.x и 0.15.x. Он основан и требует наличия среды Bootstrap React в качестве зависимости (которая может быть установлена ​​автоматически), если не установлена ​​и библиотека Bootstrap React.

Как и в каждой библиотеке, основанной на Bootstrap, вам необходимо импортировать некоторые темы Bootstrap либо из локальной копии CSS, либо из CDN:

И затем инициализируйте указатель даты в React:

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 (
Label
Help
);
}
}

7. Реагировать на календарь

Живая демо

React Calendar — это не просто компонент календаря, а модульный инструментарий для создания всего, что связано с календарями в React, например Datepickers. Он находится на ранней стадии альфа-версии, поэтому документация и дополнительные функции будут доступны. Однако его можно использовать еще:

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 (
{/* Base calendar component */}
);
}
}

По умолчанию стиля нет, но пример темы с использованием начальной загрузки включен в less/bootstrap-theme.less,

6. Реагировать на календарь ввода

Живая демо

Реактивный ввод — это простой компонент для выбора даты внутри ввода. Все стили написаны на CSS и находятся в style/index.css, Все, что вам нужно сделать, это импортировать компонент:

import Calendar from 'react-input-calendar'

И узнать больше о свойства, которые поддерживает компонент.

5. Входной момент

Живая демо

Input Moments — это средство выбора даты и времени, основанное на React. momentjs, дизайн от фрилансера а также иконки от иониконов.

4. Реагировать на Datepicker

Живая демо

React Datepicker — это очень простой и многократно используемый компонент DatePicker для React. Вам нужно установить React и Moment.js отдельно, так как эти зависимости не включены в пакет. Ниже приведен простой пример использования Datepicker в представлении React. Вам также потребуется файл 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 ;
}
}

3. React Day Picker

Живая демо

React Day Picker — гибкий сборщик дат. Он не имеет зависимостей, полностью настраивается, предлагает поддержку ARIA, локализуется и весит менее 8 КБ.

2. Реагировать на бесконечный календарь

Живая демо

Бесконечная прокрутка выбора даты является компонентом для React, с локализацией, выбором диапазона, тем, поддержкой клавиатуры и многим другим. Основными особенностями компонента являются:

• Бесконечная прокрутка — Просто продолжай прокручивать, просто продолжать прокручивать
• гибкий — Мин. / Макс. Дата, даты отключения, дни отключения и т. Д.
• растяжимый — Добавить выбор диапазона дат, выбор нескольких дат или создать свой собственный HOC!
• Локализация и перевод — На французском, это будет!
• изменяемые — Настройка и тема для вашего сердца.
• Выбор года — Для быстрого прыжка из года в год
• Поддержка клавиатуры
• События и обратные вызовы — beforeSelect, onSelect, onScroll и т. Д.
• Мобильный дружественный — Шелковистая плавная прокрутка на мобильном телефоне

1. Даты реагирования

Живая демо

React Dates — это легко интернационализируемая, удобная для мобильных устройств библиотека для сбора данных в Интернете. 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 (
this.setState({ date })} // PropTypes.func.isRequired
focused={this.state.focused} // PropTypes.bool
onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
/>
);
}
}

Если вам известен еще один замечательный компонент datepicker для реагирования и он с открытым исходным кодом, пожалуйста, поделитесь им с сообществом в поле для комментариев.