feat(natural-date-input): hide raw input once date is parsed

The natural-language input box kept its placeholder visible after a
date was parsed, with the green confirmation pill rendering below.
Several admins read this as "the input is empty." Hide the input once
parsedDate is set; show only the green pill with an Edit link that
clears the parse and re-opens the input.
This commit is contained in:
Jennie Robinson Faber 2026-05-19 10:37:08 +01:00
parent 6fa3e08fe0
commit f5b7a3eeba

View file

@ -1,6 +1,6 @@
<template>
<div class="space-y-2">
<div class="relative">
<div v-if="!parsedDate || hasError" class="relative">
<UInput
v-model="naturalInput"
:placeholder="placeholder"
@ -36,9 +36,18 @@
class="text-sm px-3 py-2"
style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
>
<div class="flex items-center gap-2">
<Icon name="heroicons:calendar" class="w-4 h-4" />
<span>{{ formatParsedDate(parsedDate) }}</span>
<div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
<Icon name="heroicons:calendar" class="w-4 h-4" />
<span>{{ formatParsedDate(parsedDate) }}</span>
</div>
<button
type="button"
class="edit-link"
@click="clearAndEdit"
>
Edit
</button>
</div>
</div>
@ -203,6 +212,23 @@ const setError = (message) => {
parsedDate.value = null;
};
const clearAndEdit = () => {
// Pre-fill the input with a readable string so the user doesn't start over.
naturalInput.value = parsedDate.value
? parsedDate.value.toLocaleString("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "2-digit",
hour12: true,
})
: "";
parsedDate.value = null;
isValidParse.value = false;
hasError.value = false;
};
const formatForDatetimeLocal = (date) => {
if (!date) return "";
// Format as YYYY-MM-DDTHH:MM for datetime-local input
@ -246,3 +272,19 @@ const formatParsedDate = (date) => {
}
};
</script>
<style scoped>
.edit-link {
background: none;
border: none;
color: var(--candle);
cursor: pointer;
font-family: "Commit Mono", monospace;
font-size: 11px;
padding: 0;
text-decoration: underline;
}
.edit-link:hover {
color: var(--ember);
}
</style>