imrc-datetime-picker
Version:
(Improved) React component datetime picker by momentjs
308 lines (281 loc) • 7.15 kB
Markdown
# (Improved) Rc-Datetime-Picker
Imrc-Datetime-Picker is a react component for datetime picker by [Moment.js].
[](https://nodei.co/npm/imrc-datetime-picker/)
Thanks to [~allenwu](https://www.npmjs.com/~allenwu) for authoring the base package [`rc-datetime-picker`](https://npmjs.com/package/rc-datetime-picker)
[**See The `ChangeLog` Here**](https://github.com/smrsan76/imrc-datetime-picker/blob/master/CHANGELOG.md)
> Note: Check the [**TODO.md**](https://github.com/smrsan76/imrc-datetime-picker/blob/master/TODO.md)
> file before usage. Maybe some features are still **buggy 💀** since the [`rc-datetime-picker`](https://npmjs.com/package/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.
[moment.js]: http://momentjs.com/
[moment-jalaali]: https://npmjs.com/package/moment-jalaali
[demo]: https://smrsan76.github.io/imrc-datetime-picker/
## Props
### General Props
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>moment</td>
<td>moment</td>
<td></td>
<td>Set the selected date.</td>
<td></td>
</tr>
<tr>
<td>onChange</td>
<td>Function(datetime: moment)</td>
<td></td>
<td>`onChange` will be triggered while datetime changing.</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td></td>
<td>Additional css class of root dom node.</td>
<td></td>
</tr>
<tr>
<td>isOpen</td>
<td>Boolean</td>
<td>true</td>
<td>Whether to show the picker.</td>
<td></td>
</tr>
<tr>
<td>showCalendarPicker</td>
<td>Boolean</td>
<td>true</td>
<td>Whether to show the calendar picker.</td>
<td></td>
</tr>
<tr>
<td>showTimePicker</td>
<td>Boolean</td>
<td>true</td>
<td>Whether to show the time picker.</td>
<td></td>
</tr>
<tr>
<td>splitPanel</td>
<td>Boolean</td>
<td>false</td>
<td>Enable `split-panel` mode.</td>
<td></td>
</tr>
<tr>
<td>shortcuts</td>
<td>Object:{name: moment} | Object:{name: { moment, callback }}</td>
<td></td>
<td>
Add shortcuts on the top `shortcuts-bar` for selecting a date.
<b><i>It supports callback option in v2.1.1 and above.</i></b>
</td>
<td></td>
</tr>
<tr>
<td>maxDate</td>
<td>moment</td>
<td></td>
<td>Max Date limit.</td>
<td></td>
</tr>
<tr>
<td>minDate</td>
<td>moment</td>
<td></td>
<td>Min Date limit.</td>
<td></td>
</tr>
<tr>
<td>weeks</td>
<td>Array</td>
<td>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</td>
<td>Text for weekdays.</td>
<td></td>
</tr>
<tr>
<td>months</td>
<td>Array</td>
<td>[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</td>
<td>Text for months.</td>
<td></td>
</tr>
<tr>
<td>dayFormat</td>
<td>String</td>
<td>'MMMM, YYYY'</td>
<td>Formatting current date of the day panel.</td>
<td></td>
</tr>
<tr>
<td>minPanel</td>
<td>String</td>
<td>'day'</td>
<td>Min panel for select.</td>
<td></td>
</tr>
<tr>
<td>isSolar</td>
<td>Boolean</td>
<td>'day'</td>
<td>Solar date mode. Notice that you should use moment-jalaali package instead of moment.</td>
<td>>=2.x</td>
</tr>
<tr>
<td>lang</td>
<td>String</td>
<td>undefined (or 'en')</td>
<td>
Language name. ('en', 'fa') is supported.
Notice that you should use moment-jalaali package instead of moment,
if you want to use 'fa' language.
</td>
<td>>=2.x</td>
</tr>
</tbody>
</table>
### \*Trigger Props
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>false</td>
<td>Disabled triggering.</td>
<td></td>
</tr>
<tr>
<td>appendToBody</td>
<td>Boolean</td>
<td>false</td>
<td>Whether to render the picker to `body`.</td>
<td></td>
</tr>
<tr>
<td>closeOnSelectDay</td>
<td>Boolean</td>
<td>false</td>
<td>Whether to close the picker when selecting a date on day panel.</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>String</td>
<td>'bottom'</td>
<td>
The position of popup.
</td>
<td>>= v1.0.0</td>
</tr>
</tbody>
</table>
### \*Range Props
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>format</td>
<td>String</td>
<td>'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD'</td>
<td>Formatting current date of each panel.</td>
<td></td>
</tr>
<tr>
<td>showCustomButton</td>
<td>Boolean</td>
<td>false</td>
<td>Whether to show the custom button.</td>
<td></td>
</tr>
<tr>
<td>customButtonText</td>
<td>String</td>
<td>Custom</td>
<td>Text for custom button.</td>
<td></td>
</tr>
<tr>
<td>customRange</td>
<td>Object: {start: moment, end: moment}</td>
<td>Last 30 days</td>
<td>Set the custom button value.</td>
<td></td>
</tr>
<tr>
<td>confirmButtonText</td>
<td>String</td>
<td>Confirm</td>
<td>Text for confirm button.</td>
<td></td>
</tr>
<tr>
<td>startDateText</td>
<td>String</td>
<td>Start Date:</td>
<td>Text for start date label.</td>
<td></td>
</tr>
<tr>
<td>endDateText</td>
<td>String</td>
<td>End date:</td>
<td>Text for end date label.</td>
<td></td>
</tr>
<tr>
<td>dateLimit</td>
<td>Object: {name: value}</td>
<td></td>
<td>Date range limt.</td>
<td></td>
</tr>
</tbody>
</table>
## Contributing
We really appreciate your contributions.
You can follow the rules of
[**Contributing guide**](https://github.com/smrsan76/imrc-datetime-picker/blob/master/CONTRIBUTING.md)
to contribute with us.