1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| 'use strict';
|
| var React = require('react'),
| moment = require('moment')
| ;
|
| var DOM = React.DOM;
| var DateTimePickerMonths = React.createClass({
| render: function() {
| return DOM.div({ className: 'rdtMonths' },[
| DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
| DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.button({onClick: this.props.subtractTime(1, 'years'), type: 'button' }, '‹')),
| DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView('years'), colSpan: 2, 'data-value': this.props.viewDate.year()}, this.props.viewDate.year() ),
| DOM.th({ key: 'next', className: 'rdtNext' }, DOM.button({onClick: this.props.addTime(1, 'years'), type: 'button' }, '›'))
| ]))),
| DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))
| ]);
| },
|
| renderMonths: function() {
| var date = this.props.selectedDate,
| month = this.props.viewDate.month(),
| year = this.props.viewDate.year(),
| rows = [],
| i = 0,
| months = [],
| renderer = this.props.renderMonth || this.renderMonth,
| classes, props
| ;
|
| while (i < 12) {
| classes = "rdtMonth";
| if( date && i === month && year === date.year() )
| classes += " rdtActive";
|
| props = {
| key: i,
| 'data-value': i,
| className: classes,
| onClick: this.props.setDate('month')
| };
|
| months.push( renderer( props, i, year, date && date.clone() ));
|
| if( months.length == 4 ){
| rows.push( DOM.tr({ key: month + '_' + rows.length }, months) );
| months = [];
| }
|
| i++;
| }
|
| return rows;
| },
|
| renderMonth: function( props, month, year, selectedDate ) {
| return DOM.td( props, this.props.viewDate.localeData()._monthsShort[ month ] );
| }
| });
|
| module.exports = DateTimePickerMonths;
|
|
