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