commit | author | age
|
caf7fe
|
1 |
/* eslint-disable */ |
d76f7b
|
2 |
'use strict'; |
M |
3 |
|
11612b
|
4 |
var React = require('react'), |
cf3d92
|
5 |
createClass = require('create-react-class'), |
39b827
|
6 |
onClickOutside = require('react-onclickoutside').default |
cf3d92
|
7 |
; |
d76f7b
|
8 |
|
84755c
|
9 |
var DateTimePickerMonths = onClickOutside( createClass({ |
eba92b
|
10 |
render: function() { |
a50b2e
|
11 |
return React.createElement('div', { className: 'rdtMonths' }, [ |
GL |
12 |
React.createElement('table', { key: 'a' }, React.createElement('thead', {}, React.createElement('tr', {}, [ |
|
13 |
React.createElement('th', { key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'years' )}, React.createElement('span', {}, '‹' )), |
99929e
|
14 |
React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colspan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ), |
a50b2e
|
15 |
React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {}, '›' )) |
eba92b
|
16 |
]))), |
a50b2e
|
17 |
React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths())) |
eba92b
|
18 |
]); |
M |
19 |
}, |
|
20 |
|
d76f7b
|
21 |
renderMonths: function() { |
c37f80
|
22 |
var date = this.props.selectedDate, |
62fd2f
|
23 |
month = this.props.viewDate.month(), |
eba92b
|
24 |
year = this.props.viewDate.year(), |
d76f7b
|
25 |
rows = [], |
M |
26 |
i = 0, |
|
27 |
months = [], |
eba92b
|
28 |
renderer = this.props.renderMonth || this.renderMonth, |
bdad6c
|
29 |
isValid = this.props.isValidDate || this.alwaysValidDate, |
f0ec5a
|
30 |
classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay, |
SE |
31 |
// Date is irrelevant because we're only interested in month |
|
32 |
irrelevantDate = 1 |
cf3d92
|
33 |
; |
d76f7b
|
34 |
|
M |
35 |
while (i < 12) { |
462115
|
36 |
classes = 'rdtMonth'; |
b8112d
|
37 |
currentMonth = |
bdad6c
|
38 |
this.props.viewDate.clone().set({ year: year, month: i, date: irrelevantDate }); |
c306f2
|
39 |
|
bdad6c
|
40 |
noOfDaysInMonth = currentMonth.endOf( 'month' ).format( 'D' ); |
SE |
41 |
daysInMonth = Array.from({ length: noOfDaysInMonth }, function( e, i ) { |
|
42 |
return i + 1; |
|
43 |
}); |
|
44 |
|
|
45 |
validDay = daysInMonth.find(function( d ) { |
|
46 |
var day = currentMonth.clone().set( 'date', d ); |
|
47 |
return isValid( day ); |
|
48 |
}); |
|
49 |
|
|
50 |
isDisabled = ( validDay === undefined ); |
|
51 |
|
|
52 |
if ( isDisabled ) |
c306f2
|
53 |
classes += ' rdtDisabled'; |
R |
54 |
|
c987d1
|
55 |
if ( date && i === date.month() && year === date.year() ) |
462115
|
56 |
classes += ' rdtActive'; |
d76f7b
|
57 |
|
eba92b
|
58 |
props = { |
M |
59 |
key: i, |
|
60 |
'data-value': i, |
c306f2
|
61 |
className: classes |
eba92b
|
62 |
}; |
c306f2
|
63 |
|
bdad6c
|
64 |
if ( !isDisabled ) |
SE |
65 |
props.onClick = ( this.props.updateOn === 'months' ? |
f0ec5a
|
66 |
this.updateSelectedMonth : this.props.setDate( 'month' ) ); |
eba92b
|
67 |
|
f0ec5a
|
68 |
months.push( renderer( props, i, year, date && date.clone() ) ); |
eba92b
|
69 |
|
bdad6c
|
70 |
if ( months.length === 4 ) { |
a50b2e
|
71 |
rows.push( React.createElement('tr', { key: month + '_' + rows.length }, months ) ); |
d76f7b
|
72 |
months = []; |
M |
73 |
} |
|
74 |
|
|
75 |
i++; |
|
76 |
} |
|
77 |
|
|
78 |
return rows; |
|
79 |
}, |
|
80 |
|
f99908
|
81 |
updateSelectedMonth: function( event ) { |
11612b
|
82 |
this.props.updateSelectedDate( event ); |
f99908
|
83 |
}, |
SA |
84 |
|
462115
|
85 |
renderMonth: function( props, month ) { |
98310d
|
86 |
var localMoment = this.props.viewDate; |
f0ec5a
|
87 |
var monthStr = localMoment.localeData().monthsShort( localMoment.month( month ) ); |
98310d
|
88 |
var strLength = 3; |
SE |
89 |
// Because some months are up to 5 characters long, we want to |
|
90 |
// use a fixed string length for consistency |
f0ec5a
|
91 |
var monthStrFixedLength = monthStr.substring( 0, strLength ); |
a50b2e
|
92 |
return React.createElement('td', props, capitalize( monthStrFixedLength ) ); |
c306f2
|
93 |
}, |
b8112d
|
94 |
|
bdad6c
|
95 |
alwaysValidDate: function() { |
c306f2
|
96 |
return 1; |
11612b
|
97 |
}, |
JM |
98 |
|
cf3d92
|
99 |
handleClickOutside: function() { |
SE |
100 |
this.props.handleClickOutside(); |
|
101 |
} |
11612b
|
102 |
})); |
d76f7b
|
103 |
|
f0ec5a
|
104 |
function capitalize( str ) { |
SE |
105 |
return str.charAt( 0 ).toUpperCase() + str.slice( 1 ); |
ce7cf5
|
106 |
} |
GK |
107 |
|
d76f7b
|
108 |
module.exports = DateTimePickerMonths; |
caf7fe
|
109 |
/* eslint-enable */ |