Foundation for order entry

htdocs/DateTimePicker.vue

@@ -0,0 +1,84 @@
+<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>