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