nuVistA/htdocs/DateTimePicker.vue

85 lines
2.8 KiB
Vue
Raw Normal View History

2023-04-24 23:10:19 -04:00
<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>