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:
parent
6fa3e08fe0
commit
f5b7a3eeba
1 changed files with 46 additions and 4 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue