1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<!--
Matomo - free/libre analytics platform
@link https://matomo.org
@license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->
<template>
<DatePicker
:selected-date-start="selectedDates[0]"
:selected-date-end="selectedDates[1]"
:highlighted-date-start="highlightedDates[0]"
:highlighted-date-end="highlightedDates[1]"
:view-date="viewDate"
:step-months="period === 'year' ? 12 : 1"
:disable-month-dropdown="period === 'year'"
@cell-hover="onHoverNormalCell($event.date, $event.$cell)"
@cell-hover-leave="onHoverLeaveNormalCells()"
@date-select="onDateSelected($event.date)"
>
</DatePicker>
</template>
<script lang="ts">
import { defineComponent, watch, ref } from 'vue';
import JQuery = JQuery;
import DatePicker from '../DatePicker/DatePicker.vue';
import Matomo from '../Matomo/Matomo';
import Periods from '../Periods/Periods';
const piwikMinDate = new Date(Matomo.minDateYear, Matomo.minDateMonth - 1, Matomo.minDateDay);
const piwikMaxDate = new Date(Matomo.maxDateYear, Matomo.maxDateMonth - 1, Matomo.maxDateDay);
export default defineComponent({
props: {
period: String,
date: [String, Date],
},
components: {
DatePicker,
},
emits: ['select'],
setup(props, context) {
const viewDate = ref(props.date);
const selectedDates = ref([null, null]);
const highlightedDates = ref([null, null]);
function getBoundedDateRange(date: string|Date) {
const dates = Periods.get(props.period).parse(date).getDateRange();
// make sure highlighted date range is within min/max date range
dates[0] = piwikMinDate < dates[0] ? dates[0] : piwikMinDate;
dates[1] = piwikMaxDate > dates[1] ? dates[1] : piwikMaxDate;
return dates;
}
function onHoverNormalCell(cellDate: Date, $cell: JQuery) {
const isOutOfMinMaxDateRange = cellDate < piwikMinDate || cellDate > piwikMaxDate;
// don't highlight anything if the period is month or day, and we're hovering over calendar
// whitespace. since there are no dates, it's doesn't make sense what you're selecting.
const shouldNotHighlightFromWhitespace = $cell.hasClass('ui-datepicker-other-month')
&& (props.period === 'month' || props.period === 'day');
if (isOutOfMinMaxDateRange
|| shouldNotHighlightFromWhitespace
) {
highlightedDates.value = [null, null];
return;
}
highlightedDates.value = getBoundedDateRange(cellDate);
}
function onHoverLeaveNormalCells() {
highlightedDates.value = [null, null];
}
function onDateSelected(date: Date) {
context.emit('select', { date });
}
function onChanges() {
if (!props.period || !props.date) {
selectedDates.value = [null, null];
return;
}
selectedDates.value = getBoundedDateRange(props.date);
}
watch(props, onChanges);
onChanges();
return {
selectedDates,
highlightedDates,
viewDate,
onHoverNormalCell,
onHoverLeaveNormalCells,
onDateSelected,
};
},
});
</script>
|
