cy-element-ui 1.0.3 → 1.0.5

package/packages/date-picker/src/basic/date-table.vue

@@ -7,435 +7,435 @@
 		@mousemove="handleMouseMove"
 		:class="{ 'is-week-mode': selectionMode === 'week' }">
 		<tbody>
-		<tr>
-			<th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
-			<th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
-		</tr>
-		<tr
-			class="el-date-table__row"
-			v-for="(row, key) in rows"
-			:class="{ current: isWeekActive(row[1]) }"
-			:key="key">
-			<td
-				v-for="(cell, key) in row"
-				:class="getCellClasses(cell)"
+			<tr>
+				<th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
+				<th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
+			</tr>
+			<tr
+				class="el-date-table__row"
+				v-for="(row, key) in rows"
+				:class="{ current: isWeekActive(row[1]) }"
 				:key="key">
-				<div>
-					<span>
-						{{ cell.text }}
-					</span>
-				</div>
-			</td>
-		</tr>
+				<td
+					v-for="(cell, key) in row"
+					:class="getCellClasses(cell)"
+					:key="key">
+					<div>
+						<span>
+							{{ cell.text }}
+						</span>
+					</div>
+				</td>
+			</tr>
 		</tbody>
 	</table>
 </template>
 
 <script>
-	import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime } from 'element-ui/src/utils/date-util';
-	import Locale from 'element-ui/src/mixins/locale';
-	import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
-
-	const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
-	const getDateTimestamp = function(time) {
-		if (typeof time === 'number' || typeof time === 'string') {
-			return _clearTime(new Date(time)).getTime();
-		} else if (time instanceof Date) {
-			return _clearTime(time).getTime();
-		} else {
-			return NaN;
-		}
-	};
-
-	// remove the first element that satisfies `pred` from arr
-	// return a new array if modification occurs
-	// return the original array otherwise
-	const removeFromArray = function(arr, pred) {
-		const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
-		return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
-	};
-
-	export default {
-		mixins: [Locale],
-
-		props: {
-			firstDayOfWeek: {
-				default: 7,
-				type: Number,
-				validator: val => val >= 1 && val <= 7
-			},
-
-			value: {},
-
-			defaultValue: {
-				validator(val) {
-					// either: null, valid Date object, Array of valid Date objects
-					return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
-				}
-			},
+import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime } from 'element-ui/src/utils/date-util';
+import Locale from 'element-ui/src/mixins/locale';
+import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+
+const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+const getDateTimestamp = function(time) {
+	if (typeof time === 'number' || typeof time === 'string') {
+		return _clearTime(new Date(time)).getTime();
+	} else if (time instanceof Date) {
+		return _clearTime(time).getTime();
+	} else {
+		return NaN;
+	}
+};
+
+// remove the first element that satisfies `pred` from arr
+// return a new array if modification occurs
+// return the original array otherwise
+const removeFromArray = function(arr, pred) {
+	const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
+	return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
+};
+
+export default {
+	mixins: [Locale],
+
+	props: {
+		firstDayOfWeek: {
+			default: 7,
+			type: Number,
+			validator: val => val >= 1 && val <= 7
+		},
+
+		value: {},
+
+		defaultValue: {
+			validator(val) {
+				// either: null, valid Date object, Array of valid Date objects
+				return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
+			}
+		},
 
-			date: {},
+		date: {},
 
-			selectionMode: {
-				default: 'day'
-			},
+		selectionMode: {
+			default: 'day'
+		},
 
-			showWeekNumber: {
-				type: Boolean,
-				default: false
-			},
+		showWeekNumber: {
+			type: Boolean,
+			default: false
+		},
 
-			disabledDate: {},
+		disabledDate: {},
 	
-			cellClassName: {},
+		cellClassName: {},
 
-			minDate: {},
+		minDate: {},
 
-			maxDate: {},
+		maxDate: {},
 
-			rangeState: {
-				default() {
-					return {
-						endDate: null,
-						selecting: false
-					};
-				}
+		rangeState: {
+			default() {
+				return {
+					endDate: null,
+					selecting: false
+				};
 			}
+		}
+	},
+
+	computed: {
+		offsetDay() {
+			const week = this.firstDayOfWeek;
+			// 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
+			return week > 3 ? 7 - week : -week;
 		},
 
-		computed: {
-			offsetDay() {
-				const week = this.firstDayOfWeek;
-				// 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
-				return week > 3 ? 7 - week : -week;
-			},
-
-			WEEKS() {
-				const week = this.firstDayOfWeek;
-				return WEEKS.concat(WEEKS).slice(week, week + 7);
-			},
-
-			year() {
-				return this.date.getFullYear();
-			},
-
-			month() {
-				return this.date.getMonth();
-			},
-
-			startDate() {
-				return getStartDateOfMonth(this.year, this.month);
-			},
-
-			rows() {
-				// TODO: refactory rows / getCellClasses
-				const date = new Date(this.year, this.month, 1);
-				let day = getFirstDayOfMonth(date); // day of first day
-				const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
-				const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
-
-				day = (day === 0 ? 7 : day);
-
-				const offset = this.offsetDay;
-				const rows = this.tableRows;
-				let count = 1;
-
-				const startDate = this.startDate;
-				const disabledDate = this.disabledDate;
-				const cellClassName = this.cellClassName;
-				const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];
-				const now = getDateTimestamp(new Date());
-
-				for (let i = 0; i < 6; i++) {
-					const row = rows[i];
-
-					if (this.showWeekNumber) {
-						if (!row[0]) {
-							row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
-						}
-					}
+		WEEKS() {
+			const week = this.firstDayOfWeek;
+			return WEEKS.concat(WEEKS).slice(week, week + 7);
+		},
 
-					for (let j = 0; j < 7; j++) {
-						let cell = row[this.showWeekNumber ? j + 1 : j];
-						if (!cell) {
-							cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
-						}
+		year() {
+			return this.date.getFullYear();
+		},
 
-						cell.type = 'normal';
+		month() {
+			return this.date.getMonth();
+		},
 
-						const index = i * 7 + j;
-						const time = nextDate(startDate, index - offset).getTime();
-						cell.inRange = time >= getDateTimestamp(this.minDate) && time <= getDateTimestamp(this.maxDate);
-						cell.start = this.minDate && time === getDateTimestamp(this.minDate);
-						cell.end = this.maxDate && time === getDateTimestamp(this.maxDate);
-						const isToday = time === now;
+		startDate() {
+			return getStartDateOfMonth(this.year, this.month);
+		},
 
-						if (isToday) {
-							cell.type = 'today';
-						}
+		rows() {
+			// TODO: refactory rows / getCellClasses
+			const date = new Date(this.year, this.month, 1);
+			let day = getFirstDayOfMonth(date); // day of first day
+			const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
+			const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
 
-						if (i >= 0 && i <= 1) {
-							const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset;
+			day = (day === 0 ? 7 : day);
 
-							if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
-								cell.text = count++;
-							} else {
-								cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
-								cell.type = 'prev-month';
-							}
-						} else {
-							if (count <= dateCountOfMonth) {
-								cell.text = count++;
-							} else {
-								cell.text = count++ - dateCountOfMonth;
-								cell.type = 'next-month';
-							}
-						}
+			const offset = this.offsetDay;
+			const rows = this.tableRows;
+			let count = 1;
 
-						let cellDate = new Date(time);
-						cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
-						cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
-						cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
-						this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
-					}
+			const startDate = this.startDate;
+			const disabledDate = this.disabledDate;
+			const cellClassName = this.cellClassName;
+			const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];
+			const now = getDateTimestamp(new Date());
 
-					if (this.selectionMode === 'week') {
-						const start = this.showWeekNumber ? 1 : 0;
-						const end = this.showWeekNumber ? 7 : 6;
-						const isWeekActive = this.isWeekActive(row[start + 1]);
+			for (let i = 0; i < 6; i++) {
+				const row = rows[i];
 
-						row[start].inRange = isWeekActive;
-						row[start].start = isWeekActive;
-						row[end].inRange = isWeekActive;
-						row[end].end = isWeekActive;
+				if (this.showWeekNumber) {
+					if (!row[0]) {
+						row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
 					}
 				}
 
-				return rows;
-			}
-		},
+				for (let j = 0; j < 7; j++) {
+					let cell = row[this.showWeekNumber ? j + 1 : j];
+					if (!cell) {
+						cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
+					}
+
+					cell.type = 'normal';
+
+					const index = i * 7 + j;
+					const time = nextDate(startDate, index - offset).getTime();
+					cell.inRange = time >= getDateTimestamp(this.minDate) && time <= getDateTimestamp(this.maxDate);
+					cell.start = this.minDate && time === getDateTimestamp(this.minDate);
+					cell.end = this.maxDate && time === getDateTimestamp(this.maxDate);
+					const isToday = time === now;
+
+					if (isToday) {
+						cell.type = 'today';
+					}
 
-		watch: {
-			'rangeState.endDate'(newVal) {
-				this.markRange(this.minDate, newVal);
-			},
+					if (i >= 0 && i <= 1) {
+						const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset;
 
-			minDate(newVal, oldVal) {
-				if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
-					this.markRange(this.minDate, this.maxDate);
+						if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
+							cell.text = count++;
+						} else {
+							cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
+							cell.type = 'prev-month';
+						}
+					} else {
+						if (count <= dateCountOfMonth) {
+							cell.text = count++;
+						} else {
+							cell.text = count++ - dateCountOfMonth;
+							cell.type = 'next-month';
+						}
+					}
+
+					let cellDate = new Date(time);
+					cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
+					cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
+					cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
+					this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
 				}
-			},
 
-			maxDate(newVal, oldVal) {
-				if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
-					this.markRange(this.minDate, this.maxDate);
+				if (this.selectionMode === 'week') {
+					const start = this.showWeekNumber ? 1 : 0;
+					const end = this.showWeekNumber ? 7 : 6;
+					const isWeekActive = this.isWeekActive(row[start + 1]);
+
+					row[start].inRange = isWeekActive;
+					row[start].start = isWeekActive;
+					row[end].inRange = isWeekActive;
+					row[end].end = isWeekActive;
 				}
 			}
+
+			return rows;
+		}
+	},
+
+	watch: {
+		'rangeState.endDate'(newVal) {
+			this.markRange(this.minDate, newVal);
 		},
 
-		data() {
-			return {
-				tableRows: [ [], [], [], [], [], [] ],
-				lastRow: null,
-				lastColumn: null
-			};
+		minDate(newVal, oldVal) {
+			if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
+				this.markRange(this.minDate, this.maxDate);
+			}
 		},
 
-		methods: {
-			cellMatchesDate(cell, date) {
-				const value = new Date(date);
-				return this.year === value.getFullYear() &&
-					this.month === value.getMonth() &&
-					Number(cell.text) === value.getDate();
-			},
-
-			getCellClasses(cell) {
-				const selectionMode = this.selectionMode;
-				const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
-
-				let classes = [];
-				if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
-					classes.push('available');
-					if (cell.type === 'today') {
-						classes.push('today');
-					}
-				} else {
-					classes.push(cell.type);
-				}
+		maxDate(newVal, oldVal) {
+			if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
+				this.markRange(this.minDate, this.maxDate);
+			}
+		}
+	},
+
+	data() {
+		return {
+			tableRows: [ [], [], [], [], [], [] ],
+			lastRow: null,
+			lastColumn: null
+		};
+	},
+
+	methods: {
+		cellMatchesDate(cell, date) {
+			const value = new Date(date);
+			return this.year === value.getFullYear() &&
+    this.month === value.getMonth() &&
+    Number(cell.text) === value.getDate();
+		},
 
-				if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
-					classes.push('default');
-				}
+		getCellClasses(cell) {
+			const selectionMode = this.selectionMode;
+			const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
 
-				if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {
-					classes.push('current');
+			let classes = [];
+			if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
+				classes.push('available');
+				if (cell.type === 'today') {
+					classes.push('today');
 				}
+			} else {
+				classes.push(cell.type);
+			}
 
-				if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {
-					classes.push('in-range');
+			if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
+				classes.push('default');
+			}
 
-					if (cell.start) {
-						classes.push('start-date');
-					}
+			if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {
+				classes.push('current');
+			}
 
-					if (cell.end) {
-						classes.push('end-date');
-					}
-				}
+			if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {
+				classes.push('in-range');
 
-				if (cell.disabled) {
-					classes.push('disabled');
+				if (cell.start) {
+					classes.push('start-date');
 				}
 
-				if (cell.selected) {
-					classes.push('selected');
+				if (cell.end) {
+					classes.push('end-date');
 				}
+			}
 
-				if (cell.customClass) {
-					classes.push(cell.customClass);
-				}
+			if (cell.disabled) {
+				classes.push('disabled');
+			}
 
-				return classes.join(' ');
-			},
+			if (cell.selected) {
+				classes.push('selected');
+			}
 
-			getDateOfCell(row, column) {
-				const offsetFromStart = row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay;
-				return nextDate(this.startDate, offsetFromStart);
-			},
+			if (cell.customClass) {
+				classes.push(cell.customClass);
+			}
 
-			isWeekActive(cell) {
-				if (this.selectionMode !== 'week') return false;
-				const newDate = new Date(this.year, this.month, 1);
-				const year = newDate.getFullYear();
-				const month = newDate.getMonth();
+			return classes.join(' ');
+		},
 
-				if (cell.type === 'prev-month') {
-					newDate.setMonth(month === 0 ? 11 : month - 1);
-					newDate.setFullYear(month === 0 ? year - 1 : year);
-				}
+		getDateOfCell(row, column) {
+			const offsetFromStart = row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay;
+			return nextDate(this.startDate, offsetFromStart);
+		},
 
-				if (cell.type === 'next-month') {
-					newDate.setMonth(month === 11 ? 0 : month + 1);
-					newDate.setFullYear(month === 11 ? year + 1 : year);
-				}
+		isWeekActive(cell) {
+			if (this.selectionMode !== 'week') return false;
+			const newDate = new Date(this.year, this.month, 1);
+			const year = newDate.getFullYear();
+			const month = newDate.getMonth();
 
-				newDate.setDate(parseInt(cell.text, 10));
+			if (cell.type === 'prev-month') {
+				newDate.setMonth(month === 0 ? 11 : month - 1);
+				newDate.setFullYear(month === 0 ? year - 1 : year);
+			}
 
-				if (isDate(this.value)) {
-					const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1;
-					const weekDate = prevDate(this.value, dayOffset);
-					return weekDate.getTime() === newDate.getTime();
-				}
-				return false;
-			},
-
-			markRange(minDate, maxDate) {
-				minDate = getDateTimestamp(minDate);
-				maxDate = getDateTimestamp(maxDate) || minDate;
-				[minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
-
-				const startDate = this.startDate;
-				const rows = this.rows;
-				for (let i = 0, k = rows.length; i < k; i++) {
-					const row = rows[i];
-					for (let j = 0, l = row.length; j < l; j++) {
-						if (this.showWeekNumber && j === 0) continue;
-
-						const cell = row[j];
-						const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
-						const time = nextDate(startDate, index - this.offsetDay).getTime();
-
-						cell.inRange = minDate && time >= minDate && time <= maxDate;
-						cell.start = minDate && time === minDate;
-						cell.end = maxDate && time === maxDate;
-					}
-				}
-			},
+			if (cell.type === 'next-month') {
+				newDate.setMonth(month === 11 ? 0 : month + 1);
+				newDate.setFullYear(month === 11 ? year + 1 : year);
+			}
 
-			handleMouseMove(event) {
-				if (!this.rangeState.selecting) return;
+			newDate.setDate(parseInt(cell.text, 10));
 
-				let target = event.target;
-				if (target.tagName === 'SPAN') {
-					target = target.parentNode.parentNode;
-				}
-				if (target.tagName === 'DIV') {
-					target = target.parentNode;
-				}
-				if (target.tagName !== 'TD') return;
-
-				const row = target.parentNode.rowIndex - 1;
-				const column = target.cellIndex;
-
-				// can not select disabled date
-				if (this.rows[row][column].disabled) return;
-
-				// only update rangeState when mouse moves to a new cell
-				// this avoids frequent Date object creation and improves performance
-				if (row !== this.lastRow || column !== this.lastColumn) {
-					this.lastRow = row;
-					this.lastColumn = column;
-					this.$emit('changerange', {
-						minDate: this.minDate,
-						maxDate: this.maxDate,
-						rangeState: {
-							selecting: true,
-							endDate: this.getDateOfCell(row, column)
-						}
-					});
-				}
-			},
+			if (isDate(this.value)) {
+				const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1;
+				const weekDate = prevDate(this.value, dayOffset);
+				return weekDate.getTime() === newDate.getTime();
+			}
+			return false;
+		},
 
-			handleClick(event) {
-				let target = event.target;
-				if (target.tagName === 'SPAN') {
-					target = target.parentNode.parentNode;
-				}
-				if (target.tagName === 'DIV') {
-					target = target.parentNode;
+		markRange(minDate, maxDate) {
+			minDate = getDateTimestamp(minDate);
+			maxDate = getDateTimestamp(maxDate) || minDate;
+			[minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
+
+			const startDate = this.startDate;
+			const rows = this.rows;
+			for (let i = 0, k = rows.length; i < k; i++) {
+				const row = rows[i];
+				for (let j = 0, l = row.length; j < l; j++) {
+					if (this.showWeekNumber && j === 0) continue;
+
+					const cell = row[j];
+					const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
+					const time = nextDate(startDate, index - this.offsetDay).getTime();
+
+					cell.inRange = minDate && time >= minDate && time <= maxDate;
+					cell.start = minDate && time === minDate;
+					cell.end = maxDate && time === maxDate;
 				}
+			}
+		},
+
+		handleMouseMove(event) {
+			if (!this.rangeState.selecting) return;
+
+			let target = event.target;
+			if (target.tagName === 'SPAN') {
+				target = target.parentNode.parentNode;
+			}
+			if (target.tagName === 'DIV') {
+				target = target.parentNode;
+			}
+			if (target.tagName !== 'TD') return;
+
+			const row = target.parentNode.rowIndex - 1;
+			const column = target.cellIndex;
+
+			// can not select disabled date
+			if (this.rows[row][column].disabled) return;
+
+			// only update rangeState when mouse moves to a new cell
+			// this avoids frequent Date object creation and improves performance
+			if (row !== this.lastRow || column !== this.lastColumn) {
+				this.lastRow = row;
+				this.lastColumn = column;
+				this.$emit('changerange', {
+					minDate: this.minDate,
+					maxDate: this.maxDate,
+					rangeState: {
+						selecting: true,
+						endDate: this.getDateOfCell(row, column)
+					}
+				});
+			}
+		},
 
-				if (target.tagName !== 'TD') return;
+		handleClick(event) {
+			let target = event.target;
+			if (target.tagName === 'SPAN') {
+				target = target.parentNode.parentNode;
+			}
+			if (target.tagName === 'DIV') {
+				target = target.parentNode;
+			}
+
+			if (target.tagName !== 'TD') return;
 
-				const row = target.parentNode.rowIndex - 1;
-				const column = this.selectionMode === 'week' ? 1 : target.cellIndex;
-				const cell = this.rows[row][column];
+			const row = target.parentNode.rowIndex - 1;
+			const column = this.selectionMode === 'week' ? 1 : target.cellIndex;
+			const cell = this.rows[row][column];
 
-				if (cell.disabled || cell.type === 'week') return;
+			if (cell.disabled || cell.type === 'week') return;
 
-				const newDate = this.getDateOfCell(row, column);
+			const newDate = this.getDateOfCell(row, column);
 
-				if (this.selectionMode === 'range') {
-					if (!this.rangeState.selecting) {
-						this.$emit('pick', { minDate: newDate, maxDate: null });
-						this.rangeState.selecting = true;
+			if (this.selectionMode === 'range') {
+				if (!this.rangeState.selecting) {
+					this.$emit('pick', { minDate: newDate, maxDate: null });
+					this.rangeState.selecting = true;
+				} else {
+					if (newDate >= this.minDate) {
+						this.$emit('pick', { minDate: this.minDate, maxDate: newDate });
 					} else {
-						if (newDate >= this.minDate) {
-							this.$emit('pick', { minDate: this.minDate, maxDate: newDate });
-						} else {
-							this.$emit('pick', { minDate: newDate, maxDate: this.minDate });
-						}
-						this.rangeState.selecting = false;
+						this.$emit('pick', { minDate: newDate, maxDate: this.minDate });
 					}
-				} else if (this.selectionMode === 'day') {
-					this.$emit('pick', newDate);
-				} else if (this.selectionMode === 'week') {
-					const weekNumber = getWeekNumber(newDate);
-					const value = newDate.getFullYear() + 'w' + weekNumber;
-					this.$emit('pick', {
-						year: newDate.getFullYear(),
-						week: weekNumber,
-						value: value,
-						date: newDate
-					});
-				} else if (this.selectionMode === 'dates') {
-					const value = this.value || [];
-					const newValue = cell.selected
-						? removeFromArray(value, date => date.getTime() === newDate.getTime())
-						: [...value, newDate];
-					this.$emit('pick', newValue);
+					this.rangeState.selecting = false;
 				}
+			} else if (this.selectionMode === 'day') {
+				this.$emit('pick', newDate);
+			} else if (this.selectionMode === 'week') {
+				const weekNumber = getWeekNumber(newDate);
+				const value = newDate.getFullYear() + 'w' + weekNumber;
+				this.$emit('pick', {
+					year: newDate.getFullYear(),
+					week: weekNumber,
+					value: value,
+					date: newDate
+				});
+			} else if (this.selectionMode === 'dates') {
+				const value = this.value || [];
+				const newValue = cell.selected
+					? removeFromArray(value, date => date.getTime() === newDate.getTime())
+					: [...value, newDate];
+				this.$emit('pick', newValue);
 			}
 		}
-	};
+	}
+};
 </script>