flaschengeist-frontend/src/components/utils/IsoDateInput.vue

204 lines
5.6 KiB
Vue
Raw Normal View History

2020-11-15 18:47:05 +00:00
<template>
<q-input
filled
:readonly="readonly"
:label="label"
:value="getDateTime()"
:placeholder="placeholder"
v-on:input="dateTimeChanged"
:rules="customRules"
2020-11-15 18:47:05 +00:00
>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date :value="getDate()" mask="YYYY-MM-DD" v-on:input="dateChanged">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
2020-11-15 18:47:05 +00:00
<q-icon
name="mdi-clock-outline"
2020-11-15 18:47:05 +00:00
class="cursor-pointer"
v-if="type == 'time' || type == 'datetime'"
2020-11-15 18:47:05 +00:00
>
<q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
<q-time :value="getTime()" mask="HH:mm" v-on:input="timeChanged">
2020-11-15 18:47:05 +00:00
<div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat />
2020-11-15 18:47:05 +00:00
</div>
</q-time>
2020-11-15 18:47:05 +00:00
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
2020-11-15 18:47:05 +00:00
import { date } from 'quasar';
interface Props {
value?: Date;
label?: string;
readonly: boolean;
type: string;
rules: Array<any>;
2020-11-15 18:47:05 +00:00
}
export default defineComponent({
name: 'IsoDateInput',
props: {
value: {
2021-01-27 07:16:44 +00:00
required: true
2020-11-15 18:47:05 +00:00
},
label: {},
readonly: {
2021-01-27 07:16:44 +00:00
default: false
2020-11-15 18:47:05 +00:00
},
type: {
default: 'date',
validator: function(value: string) {
return ['date', 'time', 'datetime'].indexOf(value) !== -1;
2021-01-27 07:16:44 +00:00
}
},
rules: {
default: []
2021-01-27 07:16:44 +00:00
}
2020-11-15 18:47:05 +00:00
},
setup(props: Props, { emit }: { emit: any }) {
function getDateTime() {
if (typeof props.value == 'object') {
switch (props.type) {
case 'date':
return getDate();
case 'time':
return getTime();
case 'datetime':
return `${getDate()} ${getTime()}`;
}
}
return props.value;
}
2020-11-15 18:47:05 +00:00
function getDate() {
if (typeof props.value == 'object') {
2020-11-15 18:47:05 +00:00
return date.formatDate(props.value, 'YYYY-MM-DD');
}
return '';
}
function getTime() {
if (typeof props.value == 'object') {
return date.formatDate(props.value, 'HH:mm');
}
return '';
}
const _date = ref('');
const _time = ref('');
const placeholder = computed(() => {
switch (props.type) {
case 'date':
return 'YYYY-MM-DD';
case 'time':
return 'HH:mm';
case 'datetime':
return 'YYYY-MM-DD HH:mm';
}
});
2020-11-15 18:47:05 +00:00
function dateChanged(dateString: string) {
_date.value = dateString;
console.log(dateString);
if (/^\d{4}-\d\d-\d\d$/.test(dateString)) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', new Date(`${_date.value} ${_time.value}`));
} else {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', dateString);
}
}
function timeChanged(timeString: string) {
_time.value = timeString;
if (_date.value == '') {
_date.value = date.formatDate(new Date(), 'YYYY-MM-DD');
}
if (/^\d\d:\d\d$/.test(timeString)) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', new Date(`${_date.value} ${_time.value}`));
} else {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', timeString);
}
}
function dateTimeChanged(dateTimeString: string) {
switch (props.type) {
case 'date':
dateChanged(dateTimeString);
break;
case 'time':
timeChanged(dateTimeString);
break;
case 'datetime':
const _dateTime = dateTimeString.split(' ');
_date.value = _dateTime[0];
_time.value = _dateTime[1];
console.log(dateTimeString, _dateTime);
if (/^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(dateTimeString)) {
console.log('dateTimeChanged');
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', new Date(`${_date.value} ${_time.value}`));
} else {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', dateTimeString);
}
}
2020-11-15 18:47:05 +00:00
}
function isDate(val: string) {
return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
}
function isTime(val: string) {
return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
}
function isDateTime(val: string) {
return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
}
// const customRules = computed(() => {
// const _rules = props.rules;
// switch (props.type) {
// case 'date':
// _rules.push(isDate);
// case 'time':
// _rules.push(isTime);
// case 'datetime':
// _rules.push(isDateTime);
// }
// });
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const customRules = [
props.type == 'date' ? isDate : props.type == 'time' ? isTime : isDateTime,
...props.rules
];
2020-11-15 18:47:05 +00:00
return {
getDate,
getTime,
getDateTime,
2020-11-15 18:47:05 +00:00
dateChanged,
customRules,
timeChanged,
placeholder,
2021-01-27 07:16:44 +00:00
dateTimeChanged
2020-11-15 18:47:05 +00:00
};
2021-01-27 07:16:44 +00:00
}
2020-11-15 18:47:05 +00:00
});
</script>