(Improved) Rc-Datetime-Picker

Imrc-Datetime-Picker is a react component for datetime picker by Moment.js.

Thanks to ~allenwu for authoring the base package rc-datetime-picker

See The ChangeLog Here

Note: Check the TODO.md file before usage. Maybe some features are still buggy 💀 since the rc-datetime-picker package or recently in the current package.

Requirements

React
Moment.js or Moment-jalaali
Modern browsers (IE>=9 is required)

Installation

Install with NPM

$ npm install imrc-datetime-picker

Manual download

Besides npm package, UMD module and styles are placed under dist/ directory:

dist/imrc-datetime-picker.js
dist/imrc-datetime-picker-min.js
dist/imrc-datetime-picker.css
dist/imrc-datetime-picker.min.css

Usage

See the demo page.

Props

General Props

Name	Type	Default	Description	Version
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: moment} \| Object:{name: { moment, callback }}		Add shortcuts on the top `shortcuts-bar` for selecting a date. *It supports callback option in v2.1.1 and above.*
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.
isSolar	Boolean	'day'	Solar date mode. Notice that you should use moment-jalaali package instead of moment.	>=2.x
lang	String	undefined (or 'en')	Language name. ('en', 'fa') is supported. Notice that you should use moment-jalaali package instead of moment, if you want to use 'fa' language.	>=2.x

*Trigger Props

Name	Type	Default	Description	Version
disabled	Boolean	false	Disabled triggering.
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.
position	String	'bottom'	The position of popup.	>= v1.0.0

*Range Props

Name	Type	Default	Description
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.

Contributing

We really appreciate your contributions.

You can follow the rules of Contributing guide to contribute with us.

smrsan76/imrc-datetime-picker