85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div v-if="structured" class="input-group">
|
||
|
|
<input type="date" class="form-control" placeholder="Date" v-model="datestr" />
|
||
|
|
<input v-if="!dateonly" type="time" class="form-control" placeholder="Time" v-model="timestr" />
|
||
|
|
<div class="input-group-append">
|
||
|
|
<button type="button" class="btn btn-outline-secondary" @click="structured = false">✏</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="input-group">
|
||
|
|
<input type="text" class="form-control" placeholder="Date & Time" v-model="x_modelValue" />
|
||
|
|
<div class="input-group-append">
|
||
|
|
<button type="button" class="btn btn-outline-secondary" @click="structured = true;">📅</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { validtime, strptime } from './fmdatetime.mjs';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
dateonly: Boolean,
|
||
|
|
modelValue: String
|
||
|
|
},
|
||
|
|
emits: [
|
||
|
|
'update:modelValue'
|
||
|
|
],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
structured: this.modelValue ? /^(\d{4})-(\d{1,2})-(\d{1,2})(?: (\d{1,2})\:(\d{1,2})(?:\:(\d{1,2}))?)?$/i.test(this.modelValue) : true,
|
||
|
|
x_modelValue: this.modelValue
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
datetime: {
|
||
|
|
get() {
|
||
|
|
var m = /^(\d{4})-(\d{1,2})-(\d{1,2})(?: (\d{1,2})\:(\d{1,2})(?:\:(\d{1,2}))?)?$/i.exec(this.x_modelValue);
|
||
|
|
return m ? new Date(m[1], m[2] - 1, m[3], m[4], m[5], m[6]) : null;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
this.x_modelValue = ('0000' + value.getFullYear()).slice(-4) + '-' + ('00' + (value.getMonth() + 1)).slice(-2) + '-' + ('00' + value.getDate()).slice(-2) + ' ' + ('00' + value.getHours()).slice(-2) + ':' + ('00' + value.getMinutes()).slice(-2) + ':' + ('00' + value.getSeconds()).slice(-2);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
datestr: {
|
||
|
|
get() {
|
||
|
|
var res;
|
||
|
|
return this.datetime ? (res = new Date(this.datetime), res.setHours(0, 0, 0, 0), res.toLocaleDateString('sv-SE')) : null;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
|
||
|
|
if(m) {
|
||
|
|
var res = this.datetime ? new Date(this.datetime) : new Date();
|
||
|
|
res.setFullYear(m[1], m[2] - 1, m[3]);
|
||
|
|
this.datetime = res;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
timestr: {
|
||
|
|
get() {
|
||
|
|
var res;
|
||
|
|
return this.datetime ? (res = new Date(this.datetime), res.setFullYear(0, 0, 0), res.toLocaleTimeString('en-GB')) : null;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
var m = /^(\d{2})\:(\d{2})(?:\:(\d{2}))?$/.exec(value);
|
||
|
|
if(m) {
|
||
|
|
var res = this.datetime ? new Date(this.datetime) : new Date();
|
||
|
|
res.setHours(m[1], m[2], m[3] || 0);
|
||
|
|
this.datetime = res;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
modelValue(value) { this.x_modelValue = value; },
|
||
|
|
x_modelValue(value) { if(validtime(value)) this.$emit('update:modelValue', value); },
|
||
|
|
structured(value) {
|
||
|
|
if(value) this.datetime = strptime(this.x_modelValue);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
strptime
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|