Rc-Datetime-Picker is a react component for datetime picker by Moment.js .
React
Moment.js Modern browsers (IE>=9 is required)
$ npm install rc-datetime-picker
Besides npm package, UMD module is placed under dist/ directory:
dist/rc-datetime-picker.js
dist/rc-datetime-picker.min.js
See the demo page.
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.
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.
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.
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.
