diff --git a/frontend/src/components/date/datepickerWithRange.vue b/frontend/src/components/date/datepickerWithRange.vue
index be9e70683..83a853f01 100644
--- a/frontend/src/components/date/datepickerWithRange.vue
+++ b/frontend/src/components/date/datepickerWithRange.vue
@@ -75,14 +75,15 @@
{{ $t('input.datemathHelp.canuse') }}
-
- {{ $t('input.datemathHelp.learnhow') }}
-
+
+ {{ $t('input.datemathHelp.learnhow') }}
+
+
showHowItWorks = false"
>
-
+
@@ -111,7 +112,7 @@ import Popup from '@/components/misc/popup.vue'
import {DATE_RANGES} from '@/components/date/dateRanges'
import BaseButton from '@/components/base/BaseButton.vue'
import DatemathHelp from '@/components/date/datemathHelp.vue'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
const props = defineProps({
modelValue: {
diff --git a/frontend/src/components/date/datepickerWithValues.vue b/frontend/src/components/date/datepickerWithValues.vue
index be9e70683..96c827a01 100644
--- a/frontend/src/components/date/datepickerWithValues.vue
+++ b/frontend/src/components/date/datepickerWithValues.vue
@@ -1,13 +1,9 @@
-
-
-
-
+ emit('close')"
+ >
{{ $t('misc.custom') }}
{{ $t(`input.datepickerRange.ranges.${text}`) }}
@@ -111,15 +89,19 @@ import Popup from '@/components/misc/popup.vue'
import {DATE_RANGES} from '@/components/date/dateRanges'
import BaseButton from '@/components/base/BaseButton.vue'
import DatemathHelp from '@/components/date/datemathHelp.vue'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
const props = defineProps({
modelValue: {
required: false,
},
+ open: {
+ type: Boolean,
+ default: false,
+ },
})
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'close'])
const {t} = useI18n({useScope: 'global'})
@@ -129,87 +111,58 @@ const flatPickerConfig = computed(() => ({
dateFormat: 'Y-m-d H:i',
enableTime: false,
wrap: true,
- mode: 'range',
locale: getFlatpickrLanguage(),
}))
const showHowItWorks = ref(false)
-const flatpickrRange = ref('')
+const flatpickrDate = ref('')
-const from = ref('')
-const to = ref('')
+const date = ref('')
watch(
() => props.modelValue,
newValue => {
- from.value = newValue.dateFrom
- to.value = newValue.dateTo
+ date.value = newValue
// Only set the date back to flatpickr when it's an actual date.
// Otherwise flatpickr runs in an endless loop and slows down the browser.
- const dateFrom = parseDateOrString(from.value, false)
- const dateTo = parseDateOrString(to.value, false)
- if (dateFrom instanceof Date && dateTo instanceof Date) {
- flatpickrRange.value = `${from.value} to ${to.value}`
+ const parsed = parseDateOrString(date.value, false)
+ if (parsed instanceof Date) {
+ flatpickrDate.value = date.value
}
},
)
function emitChanged() {
- const args = {
- dateFrom: from.value === '' ? null : from.value,
- dateTo: to.value === '' ? null : to.value,
- }
- emit('update:modelValue', args)
+ emit('update:modelValue', date.value === '' ? null : date.value)
}
watch(
- () => flatpickrRange.value,
+ () => flatpickrDate.value,
(newVal: string | null) => {
if (newVal === null) {
return
}
- const [fromDate, toDate] = newVal.split(' to ')
-
- if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
- return
- }
-
- from.value = fromDate
- to.value = toDate
+ date.value = newVal
emitChanged()
},
)
-watch(() => from.value, emitChanged)
-watch(() => to.value, emitChanged)
+watch(() => date.value, emitChanged)
-function setDateRange(range: string[] | null) {
+function setDate(range: string | null) {
if (range === null) {
- from.value = ''
- to.value = ''
+ date.value = ''
return
}
- from.value = range[0]
- to.value = range[1]
+ date.value = range
}
const customRangeActive = computed(() => {
- return !Object.values(DATE_RANGES).some(range => from.value === range[0] && to.value === range[1])
-})
-
-const buttonText = computed(() => {
- if (from.value !== '' && to.value !== '') {
- return t('input.datepickerRange.fromto', {
- from: from.value,
- to: to.value,
- })
- }
-
- return t('task.show.select')
+ return !Object.values(DATE_RANGES).some(d => date.value === d)
})
diff --git a/frontend/src/components/misc/popup.vue b/frontend/src/components/misc/popup.vue
index 1607cb713..4286d64f3 100644
--- a/frontend/src/components/misc/popup.vue
+++ b/frontend/src/components/misc/popup.vue
@@ -23,7 +23,7 @@
-
+
+
+
+
+
diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index 4e7b9e123..ed252c883 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -1,6 +1,7 @@
@@ -110,41 +159,48 @@ function escapeHtml(unsafe: string): string {
class="input"
ref="filterInput"
>
-
+ datePickerPopupOpen = false"
+ @update:model-value="updateDateInQuery"
+ />