Rc-Datetime-Picker

Rc-Datetime-Picker is a react component for datetime picker by [Moment.js].

Requirements

- React
- [Moment.js]
- Modern browsers (IE>=9 is required)

Installation

$3

``$ npm install rc-datetime-picker`

`$3`

Besides npm package, UMD module is placed under dist/ directory:

- dist/rc-datetime-picker.js - dist/rc-datetime-picker.min.js

`Usage`

See the [demo] page.

[Moment.js]: http://momentjs.com/ [demo]: https://allenwooooo.github.io/rc-datetime-picker/

`Props`

`$3`

Name	Type	Default	Description
moment	moment		Set the selected date.
onChange	Function(datetime: moment)		onChange `will be triggered while datetime changing.`
className	String		Additional css class of root dom node.
isOpen	Boolean	true	Whether to show the picker.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	true	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: value}		Add shortcuts on the top shortcuts-bar `for selecting a date.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
minPanel	String	'day'	Min panel for select.

`$3`

Name	Type	Default	Description
moment	moment		Set the selected date.
onChange	Function(datetime: moment)		onChange `will be triggered while datetime changing.`
className	String		Additional css class of root dom node.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	true	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: value}		Add shortcuts on the top shortcuts-bar `for selecting a date.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
appendToBody	Boolean	false	Whether to render the picker to body`.`
closeOnSelectDay	Boolean	false	Whether to close the picker when selecting a date on day panel.
disabled	Boolean	false	Disabled triggering.
minPanel	String	'day'	Min panel for select.

`$3`

Name	Type	Default	Description
moment	Object: {start: moment, end: moment}		Set the selected date range.
onChange	Function(datetime: {start: moment, end: moment})		onChange `will be triggered while confirm button or shortcuts clicked.`
className	String		Additional css class of root dom node.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	false	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: {start: moment, end: moment}}		Add shortcuts on the top shortcuts-bar `for selecting a date range.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
format	String	'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD'	Formatting current date of each panel.
showCustomButton	Boolean	false	Whether to show the custom button.
customButtonText	String	Custom	Text for custom button.
customRange	Object: {start: moment, end: moment}	Last 30 days	Set the custom button value.
confirmButtonText	String	Confirm	Text for confirm button.
startDateText	String	Start Date:	Text for start date label.
endDateText	String	End date:	Text for end date label.
dateLimit	Object: {name: value}		Date range limt.
minPanel	String	'day'	Min panel for select.

`$3`

Name	Type	Default	Description
moment	Object: {start: moment, end: moment}		Set the selected date range.
onChange	Function(datetime: {start: moment, end: moment})		onChange `will be triggered while confirm button or shortcuts clicked.`
className	String		Additional css class of root dom node.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	false	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: {start: moment, end: moment}}		Add shortcuts on the top shortcuts-bar `for selecting a date range.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
format	String	'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD'	Formatting current date of each panel.
showCustomButton	Boolean	false	Whether to show the custom button.
customButtonText	String	Custom	Text for custom button.
customRange	Object: {start: moment, end: moment}	Last 30 days	Set the custom button value.
confirmButtonText	String	Confirm	Text for confirm button.
startDateText	String	Start Date:	Text for start date label.
endDateText	String	End date:	Text for end date label.
dateLimit	Object: {name: value}		Date range limt.
appendToBody	Boolean	false	Whether to render the picker to body`.
disabled	Boolean	false	Disabled triggering.
minPanel	String	'day'	Min panel for select.

`Rc-Datetime-Picker`

Rc-Datetime-Picker is a react component for datetime picker by [Moment.js].

`Requirements`

- React - [Moment.js] - Modern browsers (IE>=9 is required)

`Installation`

`$3`

`` $ npm install rc-datetime-picker `

`$3`

Besides npm package, UMD module is placed under dist/ directory:

- dist/rc-datetime-picker.js - dist/rc-datetime-picker.min.js

`Usage`

See the [demo] page.

[Moment.js]: http://momentjs.com/ [demo]: https://allenwooooo.github.io/rc-datetime-picker/

`Props`

`$3`

Name	Type	Default	Description
moment	moment		Set the selected date.
onChange	Function(datetime: moment)		onChange `will be triggered while datetime changing.`
className	String		Additional css class of root dom node.
isOpen	Boolean	true	Whether to show the picker.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	true	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: value}		Add shortcuts on the top shortcuts-bar `for selecting a date.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
minPanel	String	'day'	Min panel for select.

`$3`

Name	Type	Default	Description
moment	moment		Set the selected date.
onChange	Function(datetime: moment)		onChange `will be triggered while datetime changing.`
className	String		Additional css class of root dom node.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	true	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: value}		Add shortcuts on the top shortcuts-bar `for selecting a date.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
appendToBody	Boolean	false	Whether to render the picker to body`.`
closeOnSelectDay	Boolean	false	Whether to close the picker when selecting a date on day panel.
disabled	Boolean	false	Disabled triggering.
minPanel	String	'day'	Min panel for select.

`$3`

Name	Type	Default	Description
moment	Object: {start: moment, end: moment}		Set the selected date range.
onChange	Function(datetime: {start: moment, end: moment})		onChange `will be triggered while confirm button or shortcuts clicked.`
className	String		Additional css class of root dom node.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	false	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: {start: moment, end: moment}}		Add shortcuts on the top shortcuts-bar `for selecting a date range.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
format	String	'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD'	Formatting current date of each panel.
showCustomButton	Boolean	false	Whether to show the custom button.
customButtonText	String	Custom	Text for custom button.
customRange	Object: {start: moment, end: moment}	Last 30 days	Set the custom button value.
confirmButtonText	String	Confirm	Text for confirm button.
startDateText	String	Start Date:	Text for start date label.
endDateText	String	End date:	Text for end date label.
dateLimit	Object: {name: value}		Date range limt.
minPanel	String	'day'	Min panel for select.

`$3`

Name	Type	Default	Description
moment	Object: {start: moment, end: moment}		Set the selected date range.
onChange	Function(datetime: {start: moment, end: moment})		onChange `will be triggered while confirm button or shortcuts clicked.`
className	String		Additional css class of root dom node.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	false	Whether to show the time picker.
splitPanel	Boolean	false	Enable split-panel `mode.`
shortcuts	Object:{name: {start: moment, end: moment}}		Add shortcuts on the top shortcuts-bar `for selecting a date range.`
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
format	String	'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD'	Formatting current date of each panel.
showCustomButton	Boolean	false	Whether to show the custom button.
customButtonText	String	Custom	Text for custom button.
customRange	Object: {start: moment, end: moment}	Last 30 days	Set the custom button value.
confirmButtonText	String	Confirm	Text for confirm button.
startDateText	String	Start Date:	Text for start date label.
endDateText	String	End date:	Text for end date label.
dateLimit	Object: {name: value}		Date range limt.
appendToBody	Boolean	false	Whether to render the picker to body`.
disabled	Boolean	false	Disabled triggering.
minPanel	String	'day'	Min panel for select.