marquex
2015-06-20 18dc17aa798a8a12785b83a2d6a2ebb916272763
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
'use strict';
 
var React = require('react'),
moment = require('moment')
;
 
var DOM = React.DOM;
var DateTimePickerMonths = React.createClass({
    renderMonths: function() {
        var month = this.props.selectedDate.month(),
            monthsShort = moment.monthsShort(),
            rows = [],
            i = 0,
            months = [],
            classes
        ;
 
        while (i < 12) {
            classes = "month";
            if( i === month && this.props.viewDate.year() === this.props.selectedDate.year() )
                classes += " active";
 
            months.push( DOM.td( {key: i, className: classes, onClick: this.props.setDate('month') }, monthsShort[ i ] ));
            if( months.length == 4 ){
                rows.push( DOM.tr({ key: month + '_' + rows.length }, months) );
                months = [];
            }
 
            i++;
        }
 
        return rows;
    },
 
    render: function() {
        return DOM.div({ className: 'datepicker-months' },[
            DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
                DOM.th({ key: 'prev', className: 'prev', onClick: this.props.subtractTime(1, 'years') }, '‹'),
                DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 5 }, this.props.viewDate.year() ),
                DOM.th({ key: 'next', className: 'next', onClick: this.props.addTime(1, 'years')}, '›' )
            ]))),
            DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))
        ]);
    }
});
 
module.exports = DateTimePickerMonths;