Use new date picker in filter, allow manual input (#10872)

* Use new date picker in filter, and allow manual input

* 🤏

app/src/interfaces/_system/system-filter/input-component.vue

@@ -26,12 +26,32 @@
 		allow-other
 		@update:model-value="emitValue($event)"
 	/>
+	<template v-else-if="is === 'interface-datetime'">
+		<input
+			ref="inputEl"
+			type="text"
+			:pattern="inputPattern"
+			:value="value"
+			:style="{ width }"
+			placeholder="--"
+			@input="emitValue($event.target.value)"
+		/>
+		<v-menu :show-arrow="true" placement="bottom-start" seamless full-height>
+			<template #activator="{ toggle }">
+				<v-icon class="preview" name="event" small @click="toggle" />
+			</template>
+			<div class="date-input">
+				<v-date-picker :type="type" :model-value="value" @update:model-value="emitValue" />
+			</div>
+		</v-menu>
+	</template>
 	<v-menu v-else :close-on-content-click="false" :show-arrow="true" placement="bottom-start">
 		<template #activator="{ toggle }">
 			<v-icon
 				v-if="type.startsWith('geometry') || type === 'json'"
 				class="preview"
 				:name="type === 'json' ? 'integration_instructions' : 'map'"
+				small
 				@click="toggle"
 			/>
 			<div v-else class="preview" @click="toggle">{{ displayValue }}</div>
@@ -188,4 +208,8 @@ input {
 	position: relative;
 	min-width: 800px;
 }
+
+.date-input {
+	min-width: 400px;
+}
 </style>