Add basic date picker component
This commit is contained in:
parent
5d995a2758
commit
184dd1eadb
GPG Key ID:
F40E70337AB24C9B
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div class="datepicker">
|
||||
<a @click.stop="show = !show">
|
||||
show
|
||||
{{ formatDate(date) }}
|
||||
</a>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="datepicker-popup">
|
||||
|
||||
<a @click.stop="() => setDate('today')">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'calendar-alt']"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Today
|
||||
</span>
|
||||
<span class="weekday">
|
||||
Wed
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('tomorrow')">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'sun']"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Tomorrow
|
||||
</span>
|
||||
<span class="weekday">
|
||||
Wed
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextMonday')">
|
||||
<span class="icon">
|
||||
<icon icon="coffee"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Next Monday
|
||||
</span>
|
||||
<span class="weekday">
|
||||
Wed
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('thisWeekend')">
|
||||
<span class="icon">
|
||||
<icon icon="couch"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
This Weekend
|
||||
</span>
|
||||
<span class="weekday">
|
||||
Wed
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('laterThisWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="chess-knight"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Later This Week
|
||||
</span>
|
||||
<span class="weekday">
|
||||
Wed
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="forward"/>
|
||||
</span>
|
||||
<span class="text">
|
||||
<span>
|
||||
Next Week
|
||||
</span>
|
||||
<span class="weekday">
|
||||
Wed
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
class="input"
|
||||
v-model="flatpickrDate"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
name: 'datepicker',
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
show: false,
|
||||
|
||||
flatpickrDate: null,
|
||||
flatPickerConfig: {
|
||||
altFormat: 'j M Y H:i',
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
inline: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
validator: prop => prop instanceof Date || prop === null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.date = this.value
|
||||
document.addEventListener('click', this.hideDatePopup)
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.hideDatePopup)
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.date = newVal
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateData() {
|
||||
this.$emit('input', this.date)
|
||||
this.$emit('change')
|
||||
},
|
||||
hideDatePopup() {
|
||||
this.show = false
|
||||
},
|
||||
setDate(date) {
|
||||
console.log(date)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -23,17 +23,20 @@
|
|||
placeholder="Add a new reminder..."
|
||||
/>
|
||||
</div>
|
||||
<datepicker v-model="n" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import datepicker from '@/components/input/datepicker'
|
||||
|
||||
export default {
|
||||
name: 'reminders',
|
||||
data() {
|
||||
return {
|
||||
n: null,
|
||||
reminders: [],
|
||||
lastReminder: 0,
|
||||
nowUnix: new Date(),
|
||||
|
|
@ -43,6 +46,7 @@ export default {
|
|||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
onOpen: this.updateLastReminderDate,
|
||||
onClose: this.addReminderDate,
|
||||
},
|
||||
|
|
@ -59,6 +63,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
datepicker,
|
||||
},
|
||||
mounted() {
|
||||
this.reminders = this.value
|
||||
|
|
|
|||
11
src/main.js
11
src/main.js
|
|
@ -53,8 +53,12 @@ import {
|
|||
faTrashAlt,
|
||||
faUser,
|
||||
faUsers,
|
||||
faCouch,
|
||||
faForward,
|
||||
faChessKnight,
|
||||
faCoffee,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle} from '@fortawesome/free-regular-svg-icons'
|
||||
import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle, faSun} from '@fortawesome/free-regular-svg-icons'
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
||||
// PWA
|
||||
import './registerServiceWorker'
|
||||
|
|
@ -135,6 +139,11 @@ library.add(faFillDrip)
|
|||
library.add(faKeyboard)
|
||||
library.add(faSave)
|
||||
library.add(faStarSolid)
|
||||
library.add(faCouch)
|
||||
library.add(faForward)
|
||||
library.add(faSun)
|
||||
library.add(faChessKnight)
|
||||
library.add(faCoffee)
|
||||
|
||||
Vue.component('icon', FontAwesomeIcon)
|
||||
|
||||
|
|
|
|||
|
|
@ -22,3 +22,4 @@
|
|||
@import 'legal';
|
||||
@import 'keyboard-shortcuts';
|
||||
@import 'api-config';
|
||||
@import 'datepicker'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
.datepicker {
|
||||
input.input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.datepicker-popup {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 320px;
|
||||
background: $white;
|
||||
border-radius: $radius;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
color: $text;
|
||||
transition: all $transition;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
|
||||
.text .weekday {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: .85rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: .25rem;
|
||||
|
||||
.weekday {
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-calendar {
|
||||
margin: 0 auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue