view | history | commit | commitdiff
Layne Anderson
2017-09-30 39b8275f9b2bbd8f11ffecba94fce7d339c4d577
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', {}, '‹' )),
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() ),
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', {},
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;