feat: add new component for a datepicker with range

2021-12-29 15:44:13 +01:00
parent 7408c37dec
commit 8115563d67
2 changed files with 142 additions and 10 deletions
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@ -0,0 +1,134 @@
+<template>
+	<div class="datepicker-with-range">
+		<div class="selections">
+			<a @click="setDatesToToday">Today</a>
+			<a @click="setDatesToNextWeek">Next Week</a>
+			<a @click="setDatesToNextMonth">Next Month</a>
+			<a>Custom</a>
+		</div>
+		<div class="flatpickr-container">
+			<flat-pickr
+				:config="flatPickerConfig"
+				v-model="dateRange"
+			/>
+			{{ dateRange }}
+		</div>
+	</div>
+</template>
+
+<script setup>
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+import {computed, ref, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {store} from '@/store'
+import {format} from 'date-fns'
+
+const {t} = useI18n()
+
+const emit = defineEmits(['dateChanged'])
+
+const weekStart = computed(() => store.state.auth.settings.weekStart)
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: true,
+	time_24hr: true,
+	inline: true,
+	mode: 'range',
+	locale: {
+		// FIXME: This seems to always contain the default value
+		firstDayOfWeek: weekStart,
+	},
+}))
+
+const dateRange = ref('')
+
+watch(
+	() => dateRange.value,
+	newVal => {
+		const [fromDate, toDate] = newVal.split(' to ')
+		
+		if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
+			return
+		}
+		
+		emit('dateChanged', {
+			dateFrom: new Date(fromDate),
+			dateTo: new Date(toDate),
+		})
+	}
+)
+
+function formatDate(date) {
+	return format(date, 'yyyy-MM-dd HH:mm')
+}
+
+function setDatesToToday() {
+	const startDate = new Date()
+	const endDate = new Date((new Date()).setDate((new Date()).getDate() + 1))
+	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+}
+
+function setDatesToNextWeek() {
+	const startDate = new Date()
+	const endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+}
+
+function setDatesToNextMonth() {
+	const startDate = new Date()
+	const endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
+	dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
+}
+</script>
+
+<style lang="scss" scoped>
+.datepicker-with-range {
+	border-radius: $radius;
+	border: 1px solid var(--grey-200);
+	background-color: var(--white);
+	box-shadow: $shadow;
+	display: flex;
+	width: 500px;
+
+	:deep(.flatpickr-calendar) {
+		margin: 0 auto 8px;
+		box-shadow: none;
+	}
+}
+
+.flatpickr-container {
+	width: 70%;
+	border-left: 1px solid var(--grey-200);
+
+	:deep(input.input) {
+		display: none;
+	}
+}
+
+.selections {
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+
+	a {
+		display: block;
+		width: 100%;
+		text-align: left;
+		padding: .5rem 1rem;
+		transition: $transition;
+		font-size: .9rem;
+		color: var(--text);
+
+		&.active {
+			color: var(--primary);
+		}
+
+		&:hover, &.active {
+			background-color: var(--grey-100);
+		}
+	}
+}
+</style>