Material DateTime Picker for React.js
Простой компонент для React'а в стиле Material Design. Без использования jQuery.
Оригинал взят отсюда
Установка
npm install --save react-material-datetime-picker
Подключение
Для подключения компонента нужно:
import DataTimePicker from 'react-material-datetime-picker';Также, не забудьте подключить файл со стилями
<link rel="stylesheet" href="node_modules/react-material-datetime-picker/build/react-material-datetime-picker.css">API
По-умолчанию используются внутренние свойства и обработчики.
Параметры
day (string) - день. По-умолчанию, текущий день (по времени установленному в ОС)
hours (string) - часы. По-умолчанию, текущий час (по времени, установленному в ОС)
minutes (string) - минуты. По-умолчанию, текущая минута (по времени установленному в ОС)
month (string) - месяц. По-умолчанию, текущий месяц (по времени установленному в ОС)
show (bool) - показывать комонент или скрыть его. По-умолчанию, true
showCalendar (bool) - показывать календарь. По-умолчанию, показываются.
showClock (bool) - показывать часы. По-умолчанию, скрыты
type (bool) - активная вкладка: календарь/часы. true - активен календарь, false - активены часы. По-умолчанию: true
weekday (string) - день недели. По-умолчанию, текущий день недели (по времени установленному в ОС)
year (string) - год. По-умолчанию, текущий год (по времени установленному в ОС)
Обработчики
При вызове, обработчику передается 3 аргумента: контекст компонента (this) для обращения к его состоянию, аргументы для, которые изначально передавались передавались обработчику, сам обработчик.
clickOnCancel - Обработчик нажатия на кнопку Cancel
clickOnOK - Обработчик нажатия на кнопку OK
handleChangeDay - Обработчик изменения месяца
handleChangeHours - Обработчик изменения часов
handleChangeMinutes - Обработчик изменения минут
handleChangeMonth - Обработчик изменения месяца
handleChangeType - Обработчик изменения активной вкладки (календарь/часы)
Простой пример использования
"use strict";
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import DataTimePicker from 'react-material-datetime-picker';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<DataTimePicker />
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));Пример использования с передачей своих свойств
Для удобной работы со временем, советую использовать Moment.js - библеотеку для работы со временем.
"use strict";
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import 'moment/locale/ru';
import DataTimePicker from 'react-material-datetime-picker';
class App extends Component {
constructor(props) {
super(props);
moment.locale('ru');
/**
* Состояние, где будут хранится параметры компонента
*/
this.state = {
day: moment().format("DD"), // день
hours: moment().format("HH"), // часы
minutes: moment().format("mm"), // минуты
month: moment().format("MMMM"), // месяц
show: true, // показать/скрыть компонент
showCalendar: true, // покаывать календарь
showClock: false, // показывать часы
type: true, // активная вкладка
weekday: moment().format("dddd"), // день недели
year: moment().format("YYYY"), // год
}
}
render() {
const {day, hours, minutes, month, show, showCalendar, showClock, type, weekday,year} = this.state;
return (
<DataTimePicker
day={day}
hours={hours}
minutes={minutes}
month={month}
show={show}
showCalendar={showCalendar}
showClock={showClock}
type={type}
weekday={weekday}
year={year}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));Пример использования с передачей своих обработчиков
При вызове обработчика, ему передается конекст компонента (this).
"use strict";
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import DataTimePicker from 'react-material-datetime-picker';
class App extends Component {
constructor(props) {
super(props);
}
/**
* Обработчик изменения активной вкладки (календарь/часы)
* @param context
* @param arg
* @param lastHandler
*/
handleChangeType = (context, arg, lastHandler) => {
// conext - this компонента DateTimePicker
// arg - объект с аргументами
// lastHandler - исходный обработчик
console.log(context.state); // выведется все состояние компонента
// можно изменять внутренние свойства
context.setState({
type: true,
});
console.log(arg); // выведеться {type: false} или {type: true}
};
/**
* Обработчик нажатия на кнопку OK
*/
clickOnOK = (context, arg, lastHandler) => {
lastHandler(); // при вызове исходного обработчика - аргументы передавать не нужно
};
render() {
return (
<DataTimePicker
handleChangeType={this.handleChangeType}
handleChangeMonth={this.handleChangeMonth}
handleChangeDay={this.handleChangeDay}
handleChangeHours={this.handleChangeHours}
handleChangeMinutes={this.handleChangeMinutes}
clickOnCancel={this.clickOnCancel}
clickOnOK={this.clickOnOK}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));