vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

WIP: feat: use buttons in datepicker #1799

Closed
dpschen wants to merge 1 commits from dpschen:feature/feat-use-buttons-in-datepicker into main
pull from: dpschen:feature/feat-use-buttons-in-datepicker
merge into: vikunja:main
Conversation 2 Commits 1 Files Changed 1 +25 -20
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 27ad5c4086 - Show all commits

45
src/components/input/datepicker.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="datepicker" :class="{'disabled': disabled}">
<a @click.stop="toggleDatePopup" class="show">
<template v-if="date === null">
{{ chooseDateLabel }}
</template>
<template v-else>
{{ formatDateShort(date) }}
</template>
</a>
<BaseButton @click="toggleDatePopup" class="show">
{{ date === null ? chooseDateLabel : formatDateShort(date) }}
</BaseButton>
<transition name="fade">
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
<BaseButton
v-if="(new Date()).getHours() < 21"
@click="setDate('today')"
>
<span class="icon">
<icon :icon="['far', 'calendar-alt']"/>
</span>
@ -24,8 +22,9 @@
{{ getWeekdayFromStringInterval('today') }}
</span>
</span>
</a>
<a @click.stop="() => setDate('tomorrow')">
</BaseButton>
<BaseButton @click="setDate('tomorrow')">
<span class="icon">
<icon :icon="['far', 'sun']"/>
</span>
@ -37,8 +36,8 @@
{{ getWeekdayFromStringInterval('tomorrow') }}
</span>
</span>
</a>
<a @click.stop="() => setDate('nextMonday')">
</BaseButton>
<BaseButton @click="setDate('nextMonday')">
<span class="icon">
<icon icon="coffee"/>
</span>
@ -50,8 +49,9 @@
{{ getWeekdayFromStringInterval('nextMonday') }}
</span>
</span>
</a>
<a @click.stop="() => setDate('thisWeekend')">
</BaseButton>
<BaseButton @click="setDate('thisWeekend')">
<span class="icon">
<icon icon="cocktail"/>
</span>
@ -63,8 +63,9 @@
{{ getWeekdayFromStringInterval('thisWeekend') }}
</span>
</span>
</a>
<a @click.stop="() => setDate('laterThisWeek')">
</BaseButton>
<BaseButton @click="setDate('laterThisWeek')">
<span class="icon">
<icon icon="chess-knight"/>
</span>
@ -76,8 +77,9 @@
{{ getWeekdayFromStringInterval('laterThisWeek') }}
</span>
</span>
</a>
<a @click.stop="() => setDate('nextWeek')">
</BaseButton>
<BaseButton @click="setDate('nextWeek')">
<span class="icon">
<icon icon="forward"/>
</span>
@ -89,7 +91,7 @@
{{ getWeekdayFromStringInterval('nextWeek') }}
</span>
</span>
</a>
</BaseButton>
<flat-pickr
:config="flatPickerConfig"
@ -117,6 +119,8 @@ import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import { i18n } from '@/i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import {format} from 'date-fns'
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
@ -134,6 +138,7 @@ export default defineComponent({
},
components: {
flatPickr,
BaseButton,
},
props: {
modelValue: {