imrc-datetime-picker
imrc-datetime-picker copied to clipboard
Published
20 hours ago •
smrsan76
smrsan76
(Improved) React component datetime picker by momentjs :calendar:
(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
Note: Check the TODO.md file before usage. Maybe some features are still buggy 💀 since the
rc-datetime-pickerpackage 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 | Version |
|---|---|---|---|---|
| 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