1 | # rc-calendar
|
2 | ---
|
3 |
|
4 | React Calendar
|
5 |
|
6 | [![NPM version][npm-image]][npm-url]
|
7 | [![build status][travis-image]][travis-url]
|
8 | [![Test coverage][codecov-image]][codecov-url]
|
9 | [![gemnasium deps][gemnasium-image]][gemnasium-url]
|
10 | [![npm download][download-image]][download-url]
|
11 | [![Code Quality: Javascript][lgtm-badge]][lgtm-badge-url]
|
12 | [![Total alerts][lgtm-alerts]][lgtm-alerts-url]
|
13 |
|
14 | [npm-image]: http://img.shields.io/npm/v/rc-calendar.svg?style=flat-square
|
15 | [npm-url]: http://npmjs.org/package/rc-calendar
|
16 | [travis-image]: https://img.shields.io/travis/react-component/calendar.svg?style=flat-square
|
17 | [travis-url]: https://travis-ci.org/react-component/calendar
|
18 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/calendar/master.svg?style=flat-square
|
19 | [codecov-url]: https://codecov.io/gh/react-component/calendar/branch/master
|
20 | [gemnasium-image]: http://img.shields.io/gemnasium/react-component/calendar.svg?style=flat-square
|
21 | [gemnasium-url]: https://gemnasium.com/react-component/calendar
|
22 | [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
23 | [node-url]: http://nodejs.org/download/
|
24 | [download-image]: https://img.shields.io/npm/dm/rc-calendar.svg?style=flat-square
|
25 | [download-url]: https://npmjs.org/package/rc-calendar
|
26 | [lgtm-badge]: https://img.shields.io/lgtm/grade/javascript/g/react-component/calendar.svg?logo=lgtm&logoWidth=18
|
27 | [lgtm-badge-url]: https://lgtm.com/projects/g/react-component/calendar/context:javascript
|
28 | [lgtm-alerts]: https://img.shields.io/lgtm/alerts/g/react-component/calendar.svg?logo=lgtm&logoWidth=18
|
29 | [lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/calendar/alerts
|
30 |
|
31 | ## Screenshots
|
32 |
|
33 | <img src="https://img.alicdn.com/tps/TB1mYC8KVXXXXaHXXXXXXXXXXXX-566-678.png" width="288"/>
|
34 |
|
35 | <img src="https://img.alicdn.com/tps/TB1KW1HKVXXXXa9aXXXXXXXXXXX-578-694.png" width="288"/>
|
36 |
|
37 | <img src="https://img.alicdn.com/tps/TB1QYqPKVXXXXasXVXXXXXXXXXX-1196-712.png" width="288"/>
|
38 |
|
39 | <img src="https://img.alicdn.com/tps/TB1nAGDKVXXXXXvapXXXXXXXXXX-1206-730.png" width="500"/>
|
40 |
|
41 | ## Feature
|
42 |
|
43 | * support ie9,ie9+,chrome,firefox,safari
|
44 | * support date, month, year, decade select panel
|
45 | * support week number
|
46 | * support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone
|
47 | * support aria and keyboard accessibility
|
48 |
|
49 | ### Keyboard
|
50 |
|
51 | * Previous month (PageUp)
|
52 | * Next month (PageDown)
|
53 | * tab into hour input: Last hour(Up), Next hour(Down)
|
54 | * tab into hour input: Last minute(Up), Next minute(Down)
|
55 | * tab into hour input: Last second(Up), Next second(Down)
|
56 | * Last year (Control + left)
|
57 | * Next year (Control + right)
|
58 |
|
59 | ## install
|
60 |
|
61 | [![rc-calendar](https://nodei.co/npm/rc-calendar.png)](https://npmjs.org/package/rc-calendar)
|
62 |
|
63 | ## Usage
|
64 |
|
65 | ```js
|
66 | import Calendar from 'rc-calendar';
|
67 | import React from 'react';
|
68 | import ReactDOM from 'react-dom';
|
69 | ReactDOM.render(<Calendar />, container);
|
70 | ```
|
71 |
|
72 | ## Development
|
73 |
|
74 | ```
|
75 | npm install
|
76 | npm start
|
77 | ```
|
78 |
|
79 | ## Example
|
80 |
|
81 | http://localhost:8002/examples/
|
82 |
|
83 | online example:
|
84 |
|
85 | http://react-component.github.io/calendar/examples/index.html
|
86 |
|
87 | ## API
|
88 |
|
89 | ### rc-calendar props
|
90 |
|
91 | <table class="table table-bordered table-striped">
|
92 | <thead>
|
93 | <tr>
|
94 | <th style="width: 100px;">name</th>
|
95 | <th style="width: 50px;">type</th>
|
96 | <th style="width: 50px;">default</th>
|
97 | <th>description</th>
|
98 | </tr>
|
99 | </thead>
|
100 | <tbody>
|
101 | <tr>
|
102 | <td>prefixCls</td>
|
103 | <td>String</td>
|
104 | <td></td>
|
105 | <td>prefixCls of this component</td>
|
106 | </tr>
|
107 | <tr>
|
108 | <td>className</td>
|
109 | <td>String</td>
|
110 | <td></td>
|
111 | <td>additional css class of root dom node</td>
|
112 | </tr>
|
113 | <tr>
|
114 | <td>style</td>
|
115 | <td>Object</td>
|
116 | <td></td>
|
117 | <td>additional style of root dom node</td>
|
118 | </tr>
|
119 | <tr>
|
120 | <td>dateRender</td>
|
121 | <td>(current, value) => React.Node</td>
|
122 | <td></td>
|
123 | <td>date cell</td>
|
124 | </tr>
|
125 | <tr>
|
126 | <td>renderSidebar</td>
|
127 | <td>() => React.Node</td>
|
128 | <td></td>
|
129 | <td>side bar</td>
|
130 | </tr>
|
131 | <tr>
|
132 | <td>renderFooter</td>
|
133 | <td>(mode) => React.Node</td>
|
134 | <td></td>
|
135 | <td>extra footer</td>
|
136 | </tr>
|
137 | <tr>
|
138 | <td>value</td>
|
139 | <td>moment</td>
|
140 | <td></td>
|
141 | <td>current value like input's value</td>
|
142 | </tr>
|
143 | <tr>
|
144 | <td>defaultValue</td>
|
145 | <td>moment</td>
|
146 | <td></td>
|
147 | <td>defaultValue like input's defaultValue</td>
|
148 | </tr>
|
149 | <tr>
|
150 | <td>locale</td>
|
151 | <td>Object</td>
|
152 | <td>import from 'rc-calendar/lib/locale/en_US'</td>
|
153 | <td>calendar locale</td>
|
154 | </tr>
|
155 | <tr>
|
156 | <td>format</td>
|
157 | <td>String | String[]</td>
|
158 | <td>depends on whether you set timePicker and your locale</td>
|
159 | <td>use to format/parse date(without time) value to/from input.
|
160 | When an array is provided, all values are used for parsing and first value for display.</td>
|
161 | </tr>
|
162 | <tr>
|
163 | <td>disabledDate</td>
|
164 | <td>Function(current:moment):Boolean</td>
|
165 | <td></td>
|
166 | <td>whether to disable select of current date</td>
|
167 | </tr>
|
168 | <tr>
|
169 | <td>disabledTime</td>
|
170 | <td>Function(current:moment):Object</td>
|
171 | <td></td>
|
172 | <td>a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker</td>
|
173 | </tr>
|
174 | <tr>
|
175 | <td>showDateInput</td>
|
176 | <td>Boolean</td>
|
177 | <td>true</td>
|
178 | <td>whether to show input on top of calendar panel</td>
|
179 | </tr>
|
180 | <tr>
|
181 | <td>showWeekNumber</td>
|
182 | <td>Boolean</td>
|
183 | <td>false</td>
|
184 | <td>whether to show week number of year</td>
|
185 | </tr>
|
186 | <tr>
|
187 | <td>showToday</td>
|
188 | <td>Boolean</td>
|
189 | <td>true</td>
|
190 | <td>whether to show today button</td>
|
191 | </tr>
|
192 | <tr>
|
193 | <td>showOk</td>
|
194 | <td>Boolean</td>
|
195 | <td>auto</td>
|
196 | <td>whether has ok button in footer</td>
|
197 | </tr>
|
198 | <tr>
|
199 | <td>timePicker</td>
|
200 | <td>React Element</td>
|
201 | <td></td>
|
202 | <td>rc-timer-picker/lib/module/panel element</td>
|
203 | </tr>
|
204 | <tr>
|
205 | <td>onSelect</td>
|
206 | <td>Function(date: moment)</td>
|
207 | <td></td>
|
208 | <td>called when a date is selected from calendar</td>
|
209 | </tr>
|
210 | <tr>
|
211 | <td>onClear</td>
|
212 | <td>Function()</td>
|
213 | <td></td>
|
214 | <td>called when a date is cleared from calendar</td>
|
215 | </tr>
|
216 | <tr>
|
217 | <td>onChange</td>
|
218 | <td>Function(date: moment)</td>
|
219 | <td></td>
|
220 | <td>called when a date is changed inside calendar (next year/next month/keyboard)</td>
|
221 | </tr>
|
222 | <tr>
|
223 | <td>onOk</td>
|
224 | <td>Function(date: moment)</td>
|
225 | <td></td>
|
226 | <td>called when ok button is pressed, only if it's visible</td>
|
227 | </tr>
|
228 | <tr>
|
229 | <td>dateInputPlaceholder</td>
|
230 | <td>String</td>
|
231 | <td></td>
|
232 | <td>date input's placeholder</td>
|
233 | </tr>
|
234 | <tr>
|
235 | <td>mode</td>
|
236 | <td>enum('time', 'date', 'month', 'year', 'decade')</td>
|
237 | <td>'date'</td>
|
238 | <td>control which kind of panel should be shown</td>
|
239 | </tr>
|
240 | <tr>
|
241 | <td>onPanelChange</td>
|
242 | <td>Function(date: moment, mode)</td>
|
243 | <td></td>
|
244 | <td>called when panel changed</td>
|
245 | </tr>
|
246 | <tr>
|
247 | <td>clearIcon</td>
|
248 | <td>ReactNode</td>
|
249 | <td></td>
|
250 | <td>specific the clear icon.</td>
|
251 | </tr>
|
252 | <tr>
|
253 | <td>inputMode</td>
|
254 | <td>string</td>
|
255 | <td>text</td>
|
256 | <td>Change the keyboard in mobile device</td>
|
257 | </tr>
|
258 | </tbody>
|
259 | </table>
|
260 |
|
261 |
|
262 | ### rc-calendar/lib/RangeCalendar props
|
263 |
|
264 | <table class="table table-bordered table-striped">
|
265 | <thead>
|
266 | <tr>
|
267 | <th style="width: 100px;">name</th>
|
268 | <th style="width: 50px;">type</th>
|
269 | <th style="width: 50px;">default</th>
|
270 | <th>description</th>
|
271 | </tr>
|
272 | </thead>
|
273 | <tbody>
|
274 | <tr>
|
275 | <td>prefixCls</td>
|
276 | <td>String</td>
|
277 | <td></td>
|
278 | <td>prefixCls of this component</td>
|
279 | </tr>
|
280 | <tr>
|
281 | <td>className</td>
|
282 | <td>String</td>
|
283 | <td></td>
|
284 | <td>additional css class of root dom node</td>
|
285 | </tr>
|
286 | <tr>
|
287 | <td>style</td>
|
288 | <td>Object</td>
|
289 | <td></td>
|
290 | <td>additional style of root dom node</td>
|
291 | </tr>
|
292 | <tr>
|
293 | <td>renderSidebar</td>
|
294 | <td>() => React.Node</td>
|
295 | <td></td>
|
296 | <td>side bar</td>
|
297 | </tr>
|
298 | <tr>
|
299 | <td>renderFooter</td>
|
300 | <td>() => React.Node</td>
|
301 | <td></td>
|
302 | <td>extra footer</td>
|
303 | </tr>
|
304 | <tr>
|
305 | <td>selectedValue</td>
|
306 | <td>moment[]</td>
|
307 | <td></td>
|
308 | <td>current selected value range. with two elements.</td>
|
309 | </tr>
|
310 | <tr>
|
311 | <td>defaultSelectedValue</td>
|
312 | <td>moment[]</td>
|
313 | <td></td>
|
314 | <td>default selected value range</td>
|
315 | </tr>
|
316 | <tr>
|
317 | <td>locale</td>
|
318 | <td>Object</td>
|
319 | <td>import from 'rc-calendar/lib/locale/en_US'</td>
|
320 | <td>calendar locale</td>
|
321 | </tr>
|
322 | <tr>
|
323 | <td>format</td>
|
324 | <td>String</td>
|
325 | <td>depends on whether you set timePicker and your locale</td>
|
326 | <td>use to format/parse date(without time) value to/from input</td>
|
327 | </tr>
|
328 | <tr>
|
329 | <td>disabledDate</td>
|
330 | <td>Function(current:moment):Boolean</td>
|
331 | <td></td>
|
332 | <td>whether to disable select of current date</td>
|
333 | </tr>
|
334 | <tr>
|
335 | <td>showWeekNumber</td>
|
336 | <td>Boolean</td>
|
337 | <td>false</td>
|
338 | <td>whether to show week number of year</td>
|
339 | </tr>
|
340 | <tr>
|
341 | <td>showToday</td>
|
342 | <td>Boolean</td>
|
343 | <td>true</td>
|
344 | <td>whether to show today button</td>
|
345 | </tr>
|
346 | <tr>
|
347 | <td>showOk</td>
|
348 | <td>Boolean</td>
|
349 | <td>auto</td>
|
350 | <td>whether has ok button in footer</td>
|
351 | </tr>
|
352 | <tr>
|
353 | <td>showClear</td>
|
354 | <td>Boolean</td>
|
355 | <td>false</td>
|
356 | <td>whether has clear button in header</td>
|
357 | </tr>
|
358 | <tr>
|
359 | <td>timePicker</td>
|
360 | <td>React Element</td>
|
361 | <td></td>
|
362 | <td>rc-timer-picker/lib/module/panel element</td>
|
363 | </tr>
|
364 | <tr>
|
365 | <td>onSelect</td>
|
366 | <td>Function(date: moment[])</td>
|
367 | <td></td>
|
368 | <td>called when a date range is selected from calendar</td>
|
369 | </tr>
|
370 | <tr>
|
371 | <td>onInputSelect</td>
|
372 | <td>Function(date: moment[])</td>
|
373 | <td></td>
|
374 | <td>called when a valid date entered in input</td>
|
375 | </tr>
|
376 | <tr>
|
377 | <td>onClear</td>
|
378 | <td>Function()</td>
|
379 | <td></td>
|
380 | <td>called when a date range is cleared from calendar</td>
|
381 | </tr>
|
382 | <tr>
|
383 | <td>onChange</td>
|
384 | <td>Function(date: moment[])</td>
|
385 | <td></td>
|
386 | <td>called when a date range is changed inside calendar (next year/next month/keyboard)</td>
|
387 | </tr>
|
388 | <tr>
|
389 | <td>onOk</td>
|
390 | <td>Function(date: moment)</td>
|
391 | <td></td>
|
392 | <td>called when ok button is pressed, only if it's visible</td>
|
393 | </tr>
|
394 | <tr>
|
395 | <td>dateInputPlaceholder</td>
|
396 | <td>String[]</td>
|
397 | <td></td>
|
398 | <td>range date input's placeholders</td>
|
399 | </tr>
|
400 | <tr>
|
401 | <td>disabledTime</td>
|
402 | <td>Function(current: moment[], type:'start'|'end'):Object</td>
|
403 | <td></td>
|
404 | <td>a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker</td>
|
405 | </tr>
|
406 | <tr>
|
407 | <td>showDateInput</td>
|
408 | <td>Boolean</td>
|
409 | <td>true</td>
|
410 | <td>whether to show date inputs on top of calendar panels</td>
|
411 | </tr>
|
412 | <tr>
|
413 | <td>type</td>
|
414 | <td>enum('both','start', 'end')</td>
|
415 | <td>both</td>
|
416 | <td>whether fix start or end selected value. check start-end-range example</td>
|
417 | </tr>
|
418 | <tr>
|
419 | <td>mode</td>
|
420 | <td>enum('date', 'month', 'year', 'decade')[]</td>
|
421 | <td>['date', 'date']</td>
|
422 | <td>control which kind of panels should be shown</td>
|
423 | </tr>
|
424 | <tr>
|
425 | <td>onPanelChange</td>
|
426 | <td>Function(date: moment[], mode)</td>
|
427 | <td></td>
|
428 | <td>called when panels changed</td>
|
429 | </tr>
|
430 | <tr>
|
431 | <td>hoverValue</td>
|
432 | <td>moment[]</td>
|
433 | <td></td>
|
434 | <td>control hover value</td>
|
435 | </tr>
|
436 | <tr>
|
437 | <td>onHoverChange</td>
|
438 | <td>Function(hoverValue: moment[])</td>
|
439 | <td></td>
|
440 | <td>called when hover value change</td>
|
441 | </tr>
|
442 | <tr>
|
443 | <td>clearIcon</td>
|
444 | <td>ReactNode</td>
|
445 | <td></td>
|
446 | <td>specific the clear icon.</td>
|
447 | </tr>
|
448 | </tbody>
|
449 | </table>
|
450 |
|
451 | ### rc-calendar/lib/MonthCalendar props
|
452 |
|
453 | <table class="table table-bordered table-striped">
|
454 | <thead>
|
455 | <tr>
|
456 | <th style="width: 100px;">name</th>
|
457 | <th style="width: 50px;">type</th>
|
458 | <th style="width: 50px;">default</th>
|
459 | <th>description</th>
|
460 | </tr>
|
461 | </thead>
|
462 | <tbody>
|
463 | <tr>
|
464 | <td>prefixCls</td>
|
465 | <td>String</td>
|
466 | <td></td>
|
467 | <td>prefixCls of this component</td>
|
468 | </tr>
|
469 | <tr>
|
470 | <td>className</td>
|
471 | <td>String</td>
|
472 | <td></td>
|
473 | <td>additional css class of root dom node</td>
|
474 | </tr>
|
475 | <tr>
|
476 | <td>style</td>
|
477 | <td>Object</td>
|
478 | <td></td>
|
479 | <td>additional style of root dom node</td>
|
480 | </tr>
|
481 | <tr>
|
482 | <td>value</td>
|
483 | <td>moment</td>
|
484 | <td></td>
|
485 | <td>current value like input's value</td>
|
486 | </tr>
|
487 | <tr>
|
488 | <td>defaultValue</td>
|
489 | <td>moment</td>
|
490 | <td></td>
|
491 | <td>defaultValue like input's defaultValue</td>
|
492 | </tr>
|
493 | <tr>
|
494 | <td>locale</td>
|
495 | <td>Object</td>
|
496 | <td>import from 'rc-calendar/lib/locale/en_US'</td>
|
497 | <td>calendar locale</td>
|
498 | </tr>
|
499 | <tr>
|
500 | <td>disabledDate</td>
|
501 | <td>Function(current:moment):Boolean</td>
|
502 | <td></td>
|
503 | <td>whether to disable select of current month</td>
|
504 | </tr>
|
505 | <tr>
|
506 | <td>onSelect</td>
|
507 | <td>Function(date: moment)</td>
|
508 | <td></td>
|
509 | <td>called when a date is selected from calendar</td>
|
510 | </tr>
|
511 | <tr>
|
512 | <td>monthCellRender</td>
|
513 | <td>function</td>
|
514 | <td></td>
|
515 | <td>Custom month cell render method</td>
|
516 | </tr>
|
517 | <tr>
|
518 | <td>monthCellContentRender</td>
|
519 | <td>function</td>
|
520 | <td></td>
|
521 | <td>Custom month cell content render method,the content will be appended to the cell.</td>
|
522 | </tr>
|
523 | <tr>
|
524 | <tr>
|
525 | <td>onChange</td>
|
526 | <td>Function(date: moment)</td>
|
527 | <td></td>
|
528 | <td>called when a date is changed inside calendar (next year/next month/keyboard)</td>
|
529 | </tr>
|
530 | <tr>
|
531 | <td>renderFooter</td>
|
532 | <td>() => React.Node</td>
|
533 | <td></td>
|
534 | <td>extra footer</td>
|
535 | </tr>
|
536 | </tbody>
|
537 | </table>
|
538 |
|
539 | ### rc-calendar/lib/Picker props
|
540 |
|
541 | <table class="table table-bordered table-striped">
|
542 | <thead>
|
543 | <tr>
|
544 | <th style="width: 100px;">name</th>
|
545 | <th style="width: 50px;">type</th>
|
546 | <th style="width: 50px;">default</th>
|
547 | <th>description</th>
|
548 | </tr>
|
549 | </thead>
|
550 | <tbody>
|
551 | <tr>
|
552 | <td>prefixCls</td>
|
553 | <td>String</td>
|
554 | <td></td>
|
555 | <td>prefixCls of this component</td>
|
556 | </tr>
|
557 | <tr>
|
558 | <td>calendar</td>
|
559 | <td>Calendar React Element</td>
|
560 | <td></td>
|
561 | <td></td>
|
562 | </tr>
|
563 | <tr>
|
564 | <td>disabled</td>
|
565 | <td>Boolean</td>
|
566 | <td></td>
|
567 | <td>whether picker is disabled</td>
|
568 | </tr>
|
569 | <tr>
|
570 | <td>placement</td>
|
571 | <td>String|Object</td>
|
572 | <td></td>
|
573 | <td>one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']</td>
|
574 | </tr>
|
575 | <tr>
|
576 | <td>align</td>
|
577 | <td>Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)</td>
|
578 | <td></td>
|
579 | <td>value will be merged into placement's align config.</td>
|
580 | </tr>
|
581 | <tr>
|
582 | <td>animation</td>
|
583 | <td>String</td>
|
584 | <td></td>
|
585 | <td>index.css support 'slide-up'</td>
|
586 | </tr>
|
587 | <tr>
|
588 | <td>transitionName</td>
|
589 | <td>String</td>
|
590 | <td></td>
|
591 | <td>css class for animation</td>
|
592 | </tr>
|
593 | <tr>
|
594 | <td>value</td>
|
595 | <td>moment|moment[]</td>
|
596 | <td></td>
|
597 | <td>current value like input's value</td>
|
598 | </tr>
|
599 | <tr>
|
600 | <td>defaultValue</td>
|
601 | <td>moment|moment[]</td>
|
602 | <td></td>
|
603 | <td>defaultValue like input's defaultValue</td>
|
604 | </tr>
|
605 | <tr>
|
606 | <td>onChange</td>
|
607 | <td>Function</td>
|
608 | <td></td>
|
609 | <td>called when select a different value</td>
|
610 | </tr>
|
611 | <tr>
|
612 | <td>onOpenChange</td>
|
613 | <td>(open:boolean) => void</td>
|
614 | <td></td>
|
615 | <td>called when open/close picker</td>
|
616 | </tr>
|
617 | <tr>
|
618 | <td>open</td>
|
619 | <td>Boolean</td>
|
620 | <td></td>
|
621 | <td>current open state of picker. controlled prop</td>
|
622 | </tr>
|
623 | <tr>
|
624 | <td>getCalendarContainer</td>
|
625 | <td>() => HTMLElement</td>
|
626 | <td>() => {return document.body;}</td>
|
627 | <td>dom node where calendar to be rendered into</td>
|
628 | </tr>
|
629 | <tr>
|
630 | <td>dropdownClassName</td>
|
631 | <td>string</td>
|
632 | <td></td>
|
633 | <td>additional className applied to dropdown</td>
|
634 | </tr>
|
635 | </tbody>
|
636 | </table>
|
637 |
|
638 | ### rc-calendar/lib/FullCalendar props
|
639 |
|
640 | <table class="table table-bordered table-striped">
|
641 | <thead>
|
642 | <tr>
|
643 | <th style="width: 100px;">name</th>
|
644 | <th style="width: 50px;">type</th>
|
645 | <th style="width: 50px;">default</th>
|
646 | <th>description</th>
|
647 | </tr>
|
648 | </thead>
|
649 | <tbody>
|
650 | <tr>
|
651 | <td>prefixCls</td>
|
652 | <td>String</td>
|
653 | <td></td>
|
654 | <td>prefixCls of this component</td>
|
655 | </tr>
|
656 | <tr>
|
657 | <td>Select</td>
|
658 | <td>React Component Class</td>
|
659 | <td></td>
|
660 | <td>rc-select Component Class</td>
|
661 | </tr>
|
662 | <tr>
|
663 | <td>value</td>
|
664 | <td>moment</td>
|
665 | <td></td>
|
666 | <td>current value like input's value</td>
|
667 | </tr>
|
668 | <tr>
|
669 | <td>defaultValue</td>
|
670 | <td>moment</td>
|
671 | <td></td>
|
672 | <td>defaultValue like input's defaultValue</td>
|
673 | </tr>
|
674 | <tr>
|
675 | <td>defaultType</td>
|
676 | <td>string</td>
|
677 | <td>date</td>
|
678 | <td>default panel type: date/month</td>
|
679 | </tr>
|
680 | <tr>
|
681 | <td>type</td>
|
682 | <td>string</td>
|
683 | <td></td>
|
684 | <td>panel type: date/month</td>
|
685 | </tr>
|
686 | <tr>
|
687 | <td>onTypeChange</td>
|
688 | <td>function(type)</td>
|
689 | <td></td>
|
690 | <td>called when panel type change</td>
|
691 | </tr>
|
692 | <tr>
|
693 | <td>fullscreen</td>
|
694 | <td>bool</td>
|
695 | <td>false</td>
|
696 | <td></td>
|
697 | </tr>
|
698 | <tr>
|
699 | <td>monthCellRender</td>
|
700 | <td>function</td>
|
701 | <td></td>
|
702 | <td>Custom month cell render method</td>
|
703 | </tr>
|
704 | <tr>
|
705 | <td>dateCellRender</td>
|
706 | <td>function</td>
|
707 | <td></td>
|
708 | <td>Custom date cell render method</td>
|
709 | </tr>
|
710 | <tr>
|
711 | <td>monthCellContentRender</td>
|
712 | <td>function</td>
|
713 | <td></td>
|
714 | <td>Custom month cell content render method,the content will be appended to the cell.</td>
|
715 | </tr>
|
716 | <tr>
|
717 | <td>dateCellContentRender</td>
|
718 | <td>function</td>
|
719 | <td></td>
|
720 | <td>Custom date cell content render method,the content will be appended to the cell.</td>
|
721 | </tr> <tr>
|
722 | <td>onSelect</td>
|
723 | <td>Function(date: moment)</td>
|
724 | <td></td>
|
725 | <td>called when a date is selected from calendar</td>
|
726 | </tr>
|
727 | </tbody>
|
728 | </table>
|
729 |
|
730 | ## Test Case
|
731 |
|
732 | ```
|
733 | npm test
|
734 | ```
|
735 |
|
736 | ## Coverage
|
737 |
|
738 | ```
|
739 | npm run coverage
|
740 | ```
|
741 |
|
742 | open coverage/ dir
|
743 |
|
744 | ## License
|
745 |
|
746 | rc-calendar is released under the MIT license.
|