view | history | commit | commitdiff
Simon Egersand
2016-11-15 b8112dd738d1e6257891483c3a74f0340c008b4e
commit | author | age
d76f7b 1 'use strict';
M 2
462115 3 var React = require('react');
d76f7b 4
M 5 var DOM = React.DOM;
6 var DateTimePickerMonths = React.createClass({
eba92b 7     render: function() {
462115 8         return DOM.div({ className: 'rdtMonths' }, [
SE 9             DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({}, [
0390c2 10                 DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.span({onClick: this.props.subtractTime(1, 'years')}, '‹')),
e4010d 11                 DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView('years'), colSpan: 2, 'data-value': this.props.viewDate.year()}, this.props.viewDate.year() ),
0390c2 12                 DOM.th({ key: 'next', className: 'rdtNext' }, DOM.span({onClick: this.props.addTime(1, 'years')}, '›'))
eba92b 13             ]))),
M 14             DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))
15         ]);
16     },
17
d76f7b 18     renderMonths: function() {
c37f80 19         var date = this.props.selectedDate,
62fd2f 20             month = this.props.viewDate.month(),
eba92b 21             year = this.props.viewDate.year(),
d76f7b 22             rows = [],
M 23             i = 0,
24             months = [],
eba92b 25             renderer = this.props.renderMonth || this.renderMonth,
c306f2 26             isValid = this.props.isValidDate || this.isValidDate,
eba92b 27             classes, props
d76f7b 28         ;
M 29
b8112d 30         var currentMonth, disabled,
SE 31             // Date is irrelevant because we're really only interested in month
32             irrelevantDate = 1;
d76f7b 33         while (i < 12) {
462115 34             classes = 'rdtMonth';
b8112d 35             currentMonth =
SE 36                 this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate });
37             disabled = !isValid(currentMonth);
c306f2 38
R 39             if ( disabled )
40                 classes += ' rdtDisabled';
41
462115 42             if ( date && i === month && year === date.year() )
SE 43                 classes += ' rdtActive';
d76f7b 44
eba92b 45             props = {
M 46                 key: i,
47                 'data-value': i,
c306f2 48                 className: classes
eba92b 49             };
c306f2 50
R 51             if ( !disabled )
b8112d 52                 props.onClick = (this.props.updateOn === 'months' ?
SE 53                     this.updateSelectedMonth : this.props.setDate('month'));
eba92b 54
62fd2f 55             months.push( renderer( props, i, year, date && date.clone() ));
eba92b 56
462115 57             if ( months.length === 4 ){
18dc17 58                 rows.push( DOM.tr({ key: month + '_' + rows.length }, months) );
d76f7b 59                 months = [];
M 60             }
61
62             i++;
63         }
64
65         return rows;
66     },
67
f99908 68     updateSelectedMonth: function( event ) {
SA 69         this.props.updateSelectedDate(event, true);
70     },
71
462115 72     renderMonth: function( props, month ) {
SE 73         var monthsShort = this.props.viewDate.localeData()._monthsShort;
ce7cf5 74         return DOM.td( props, monthsShort.standalone
GK 75             ? capitalize( monthsShort.standalone[ month ] )
76             : monthsShort[ month ]
462115 77         );
c306f2 78     },
b8112d 79
c306f2 80     isValidDate: function(){
R 81         return 1;
d76f7b 82     }
M 83 });
84
ce7cf5 85 function capitalize(str) {
462115 86     return str.charAt(0).toUpperCase() + str.slice(1);
ce7cf5 87 }
GK 88
d76f7b 89 module.exports = DateTimePickerMonths;