Material DateTime Picker for React.js
Простой компонент для React'а в стиле Material Design. Без использования jQuery.
Оригинал взят отсюда
Установка
npm install --save react-material-datetime-picker
Подключение
Для подключения компонента нужно:
;
Также, не забудьте подключить файл со стилями
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"; ;; ; { superprops; } { return <DataTimePicker /> ; } ReactDOM;
Пример использования с передачей своих свойств
Для удобной работы со временем, советую использовать Moment.js - библеотеку для работы со временем.
"use strict"; ;;;; ; { superprops; moment; /** * Состояние, где будут хранится параметры компонента */ thisstate = day: // день hours: // часы minutes: // минуты month: // месяц show: true // показать/скрыть компонент showCalendar: true // покаывать календарь showClock: false // показывать часы type: true // активная вкладка weekday: // день недели year: // год } { const day hours minutes month show showCalendar showClock type weekdayyear = thisstate; return <DataTimePicker day=day hours=hours minutes=minutes month=month show=show showCalendar=showCalendar showClock=showClock type=type weekday=weekday year=year /> ; } ReactDOM;
Пример использования с передачей своих обработчиков
При вызове обработчика, ему передается конекст компонента (this).
"use strict"; ;; ; { superprops; } /** * Обработчик изменения активной вкладки (календарь/часы) * @param context * @param arg * @param lastHandler */ { // conext - this компонента DateTimePicker // arg - объект с аргументами // lastHandler - исходный обработчик console; // выведется все состояние компонента // можно изменять внутренние свойства context; console; // выведеться {type: false} или {type: true} }; /** * Обработчик нажатия на кнопку OK */ { ; // при вызове исходного обработчика - аргументы передавать не нужно }; { return <DataTimePicker handleChangeType=thishandleChangeType handleChangeMonth=thishandleChangeMonth handleChangeDay=thishandleChangeDay handleChangeHours=thishandleChangeHours handleChangeMinutes=thishandleChangeMinutes clickOnCancel=thisclickOnCancel clickOnOK=thisclickOnOK /> ; } ReactDOM;