Simon Egersand
2016-11-15 b8112dd738d1e6257891483c3a74f0340c008b4e
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
'use strict';
 
var React = require('react');
 
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.span({onClick: this.props.subtractTime(1, 'years')}, '‹')),
                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.span({onClick: this.props.addTime(1, 'years')}, '›'))
            ]))),
            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,
            isValid = this.props.isValidDate || this.isValidDate,
            classes, props
        ;
 
        var currentMonth, disabled,
            // Date is irrelevant because we're really only interested in month
            irrelevantDate = 1;
        while (i < 12) {
            classes = 'rdtMonth';
            currentMonth =
                this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });
            disabled = !isValid(currentMonth);
 
            if ( disabled )
                classes += ' rdtDisabled';
 
            if ( date && i === month && year === date.year() )
                classes += ' rdtActive';
 
            props = {
                key: i,
                'data-value': i,
                className: classes
            };
 
            if ( !disabled )
                props.onClick = (this.props.updateOn === 'months' ?
                    this.updateSelectedMonth : 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;
    },
 
    updateSelectedMonth: function( event ) {
        this.props.updateSelectedDate(event, true);
    },
 
    renderMonth: function( props, month ) {
        var monthsShort = this.props.viewDate.localeData()._monthsShort;
        return DOM.td( props, monthsShort.standalone
            ? capitalize( monthsShort.standalone[ month ] )
            : monthsShort[ month ]
        );
    },
 
    isValidDate: function(){
        return 1;
    }
});
 
function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}
 
module.exports = DateTimePickerMonths;