commit | author | age
|
caf7fe
|
1 |
/* eslint-disable */ |
462115
|
2 |
'use strict'; |
SE |
3 |
|
d76f7b
|
4 |
var React = require('react'), |
cf3d92
|
5 |
createClass = require('create-react-class'), |
11612b
|
6 |
moment = require('moment'), |
39b827
|
7 |
onClickOutside = require('react-onclickoutside').default |
cf3d92
|
8 |
; |
d76f7b
|
9 |
|
84755c
|
10 |
var DateTimePickerDays = onClickOutside( createClass({ |
d76f7b
|
11 |
render: function() { |
M |
12 |
var footer = this.renderFooter(), |
|
13 |
date = this.props.viewDate, |
c37f80
|
14 |
locale = date.localeData(), |
d76f7b
|
15 |
tableChildren |
cf3d92
|
16 |
; |
d76f7b
|
17 |
|
M |
18 |
tableChildren = [ |
a50b2e
|
19 |
React.createElement('thead', { key: 'th' }, [ |
GL |
20 |
React.createElement('tr', { key: 'h' }, [ |
|
21 |
React.createElement('th', { key: 'p', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'months' )}, React.createElement('span', {}, '‹' )), |
99929e
|
22 |
React.createElement('th', { key: 's', className: 'rdtSwitch', onClick: this.props.showView( 'months' ), colspan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ), |
a50b2e
|
23 |
React.createElement('th', { key: 'n', className: 'rdtNext', onClick: this.props.addTime( 1, 'months' )}, React.createElement('span', {}, '›' )) |
18dc17
|
24 |
]), |
a50b2e
|
25 |
React.createElement('tr', { key: 'd'}, this.getDaysOfWeek( locale ).map( function( day, index ) { return React.createElement('th', { key: day + index, className: 'dow'}, day ); }) ) |
d76f7b
|
26 |
]), |
a50b2e
|
27 |
React.createElement('tbody', { key: 'tb' }, this.renderDays()) |
d76f7b
|
28 |
]; |
M |
29 |
|
462115
|
30 |
if ( footer ) |
d76f7b
|
31 |
tableChildren.push( footer ); |
M |
32 |
|
a50b2e
|
33 |
return React.createElement('div', { className: 'rdtDays' }, |
GL |
34 |
React.createElement('table', {}, tableChildren ) |
d76f7b
|
35 |
); |
M |
36 |
}, |
|
37 |
|
c37f80
|
38 |
/** |
M |
39 |
* Get a list of the days of the week |
|
40 |
* depending on the current locale |
|
41 |
* @return {array} A list with the shortname of the days |
|
42 |
*/ |
f0ec5a
|
43 |
getDaysOfWeek: function( locale ) { |
c37f80
|
44 |
var days = locale._weekdaysMin, |
M |
45 |
first = locale.firstDayOfWeek(), |
|
46 |
dow = [], |
|
47 |
i = 0 |
cf3d92
|
48 |
; |
c37f80
|
49 |
|
f0ec5a
|
50 |
days.forEach( function( day ) { |
SE |
51 |
dow[ (7 + ( i++ ) - first) % 7 ] = day; |
c37f80
|
52 |
}); |
M |
53 |
|
|
54 |
return dow; |
|
55 |
}, |
|
56 |
|
d76f7b
|
57 |
renderDays: function() { |
M |
58 |
var date = this.props.viewDate, |
62fd2f
|
59 |
selected = this.props.selectedDate && this.props.selectedDate.clone(), |
d76f7b
|
60 |
prevMonth = date.clone().subtract( 1, 'months' ), |
M |
61 |
currentYear = date.year(), |
|
62 |
currentMonth = date.month(), |
|
63 |
weeks = [], |
|
64 |
days = [], |
eba92b
|
65 |
renderer = this.props.renderDay || this.renderDay, |
bdad6c
|
66 |
isValid = this.props.isValidDate || this.alwaysValidDate, |
f0ec5a
|
67 |
classes, isDisabled, dayProps, currentDate |
cf3d92
|
68 |
; |
d76f7b
|
69 |
|
M |
70 |
// Go to the last week of the previous month |
f0ec5a
|
71 |
prevMonth.date( prevMonth.daysInMonth() ).startOf( 'week' ); |
SE |
72 |
var lastDay = prevMonth.clone().add( 42, 'd' ); |
d76f7b
|
73 |
|
f0ec5a
|
74 |
while ( prevMonth.isBefore( lastDay ) ) { |
e4010d
|
75 |
classes = 'rdtDay'; |
e7f876
|
76 |
currentDate = prevMonth.clone(); |
d76f7b
|
77 |
|
462115
|
78 |
if ( ( prevMonth.year() === currentYear && prevMonth.month() < currentMonth ) || ( prevMonth.year() < currentYear ) ) |
e4010d
|
79 |
classes += ' rdtOld'; |
462115
|
80 |
else if ( ( prevMonth.year() === currentYear && prevMonth.month() > currentMonth ) || ( prevMonth.year() > currentYear ) ) |
e4010d
|
81 |
classes += ' rdtNew'; |
d76f7b
|
82 |
|
f0ec5a
|
83 |
if ( selected && prevMonth.isSame( selected, 'day' ) ) |
e4010d
|
84 |
classes += ' rdtActive'; |
d76f7b
|
85 |
|
9eae92
|
86 |
if ( prevMonth.isSame( moment(), 'day' ) ) |
e4010d
|
87 |
classes += ' rdtToday'; |
d76f7b
|
88 |
|
f0ec5a
|
89 |
isDisabled = !isValid( currentDate, selected ); |
SE |
90 |
if ( isDisabled ) |
e4010d
|
91 |
classes += ' rdtDisabled'; |
d76f7b
|
92 |
|
eba92b
|
93 |
dayProps = { |
f0ec5a
|
94 |
key: prevMonth.format( 'M_D' ), |
eba92b
|
95 |
'data-value': prevMonth.date(), |
M |
96 |
className: classes |
|
97 |
}; |
f0ec5a
|
98 |
|
SE |
99 |
if ( !isDisabled ) |
1fdc4e
|
100 |
dayProps.onClick = this.updateSelectedDate; |
d76f7b
|
101 |
|
e7f876
|
102 |
days.push( renderer( dayProps, currentDate, selected ) ); |
eba92b
|
103 |
|
f0ec5a
|
104 |
if ( days.length === 7 ) { |
a50b2e
|
105 |
weeks.push( React.createElement('tr', { key: prevMonth.format( 'M_D' )}, days ) ); |
d76f7b
|
106 |
days = []; |
M |
107 |
} |
|
108 |
|
|
109 |
prevMonth.add( 1, 'd' ); |
|
110 |
} |
|
111 |
|
|
112 |
return weeks; |
|
113 |
}, |
|
114 |
|
1fdc4e
|
115 |
updateSelectedDate: function( event ) { |
f0ec5a
|
116 |
this.props.updateSelectedDate( event, true ); |
1fdc4e
|
117 |
}, |
EC |
118 |
|
f0ec5a
|
119 |
renderDay: function( props, currentDate ) { |
a50b2e
|
120 |
return React.createElement('td', props, currentDate.date() ); |
eba92b
|
121 |
}, |
M |
122 |
|
f0ec5a
|
123 |
renderFooter: function() { |
462115
|
124 |
if ( !this.props.timeFormat ) |
d76f7b
|
125 |
return ''; |
M |
126 |
|
62fd2f
|
127 |
var date = this.props.selectedDate || this.props.viewDate; |
0390c2
|
128 |
|
a50b2e
|
129 |
return React.createElement('tfoot', { key: 'tf'}, |
GL |
130 |
React.createElement('tr', {}, |
99929e
|
131 |
React.createElement('td', { onClick: this.props.showView( 'time' ), colspan: 7, className: 'rdtTimeToggle' }, date.format( this.props.timeFormat )) |
d76f7b
|
132 |
) |
M |
133 |
); |
e7f876
|
134 |
}, |
9f1b61
|
135 |
|
f0ec5a
|
136 |
alwaysValidDate: function() { |
bdad6c
|
137 |
return 1; |
11612b
|
138 |
}, |
JM |
139 |
|
cf3d92
|
140 |
handleClickOutside: function() { |
SE |
141 |
this.props.handleClickOutside(); |
|
142 |
} |
11612b
|
143 |
})); |
d76f7b
|
144 |
|
M |
145 |
module.exports = DateTimePickerDays; |
caf7fe
|
146 |
/* eslint-enable */ |