First

htdocs/DateRangePickerRange.vue

@@ -0,0 +1,39 @@
+<template>
+	<select class="form-select form-select-sm" style="width: auto;" v-model="x_modelValue">
+		<option value="1D">{{disp_direction}}1D</option>
+		<option value="1W">{{disp_direction}}1W</option>
+		<option value="1M">{{disp_direction}}1M</option>
+		<option value="6M">{{disp_direction}}6M</option>
+		<option value="1Y">{{disp_direction}}1Y</option>
+		<option value="2Y">{{disp_direction}}2Y</option>
+		<option value="Range">Range</option>
+	</select>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: {
+				type: String,
+				default: '1D'
+			},
+			direction: {
+				default: '-1'
+			}
+		},
+		data() {
+			return {
+				x_modelValue: this.modelValue
+			};
+		},
+		computed: {
+			disp_direction() {
+				return this.direction > 0 ? '+' : this.direction < 0 ? '−' : '';
+			}
+		},
+		watch: {
+			modelValue(value) { this.x_modelValue = value; },
+			x_modelValue(value) { this.$emit('update:modelValue', this.x_modelValue); }
+		}
+	};
+</script>